0

On my portfolio website (which I'm currently in the process of building), my side navigation which contains a custom animation, is flickering on mobile - Safari and Chrome on iPhone. This is not happening on desktop at all.

i've tried using backface-visibility: hidden; -webkit-backface-visibility: hidden as well as translate3d: on the animation containers but nothing seems to work. Any ideas?

Link: revill.io

Simon Revill
  • 117
  • 1
  • 13
  • HEY! HEADS UP! Testing this on my iPad (2018) has introduced a problem on my display that persists outside of the browser and even after a power-down. Where your mobile menu appeared, my screen is constantly flickering!!! =( – Kalnode Dec 24 '18 at 18:57
  • While I nurse my iPad, and look for the warranty... Simon: Do you think the bug is related to [this](https://stackoverflow.com/questions/18146511/bug-in-css3-rotatey-transition-on-safari)? – Kalnode Dec 24 '18 at 18:58
  • Wow, really? That’s odd... I hope your iPad sorts itself out. Sorry about that. I will check out the other post. – Simon Revill Dec 24 '18 at 19:00
  • The display flicker is starting to calm down now, although still apparent with dark backgrounds. Really strange. – Kalnode Dec 24 '18 at 19:19
  • I can only imagine this is a coincidence and/or software glitch that has persisted with iOS – Simon Revill Dec 24 '18 at 19:21
  • Yes it could be a coincidence, as iPad's have known flickering issues. I would guess that some underlying iPad issue got triggered by intense CSS 3d processing. In any case, the flicker had a sheared diagonal shape resembling the rendering glitch of the rotating cube. – Kalnode Dec 24 '18 at 19:26
  • That was exactly what I saw on my phone – Simon Revill Dec 24 '18 at 19:29
  • Ok, maybe iPhone displays can handle it better than iPad's. – Kalnode Dec 24 '18 at 19:34
  • Just an FYI for others: checking a few hours later, the iPad screen issue has cleared up. – Kalnode Dec 25 '18 at 00:26

0 Answers0