0

Since the latest iPhone/iPad update the sidebar navigation menu is flickering while scrolling up and down.

I've been trying many approachs but nothing really works.

The first try was to prevent scrolling (body), when the menu is open:

.overflow {
   position:relative;
   overflow:hidden;
   height:100%;
}

Unfortunately this doesn't fix the issue so I have tried this:

.overflow {
   position:fixed;
   overflow:hidden;
   height:100%;
}

This works but when a user opens the menu the page jumps to the top and the address bar also appears. IMO not a good user experience.

I have also tried to add this to several elements:

div {
   -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
           backface-visibility: hidden;
}

So, now I could either try to solve it with the position-fixed approach or try to avoid the flickering. I don't know why but the 'overflow:hidden' doesn't really work on iPhones.

Does anyone have a nice fix for this?

grindking
  • 917
  • 5
  • 13
  • 29

2 Answers2

3

It has something to do with 'transition'. E.g. don't use 'translateX()'... use translate3d() to enable hardware acceleration and add this to the animated wrapper. Solved my problem:

.animClass {
   -webkit-transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}

Thanx to: https://davidwalsh.name/translate3d

grindking
  • 917
  • 5
  • 13
  • 29
0

Normally not specifying the width and height of navigation menu causes such effect.

Leo The Four
  • 699
  • 9
  • 14
  • There is a height and width defined. Can you give me a specific example? – grindking Mar 08 '16 at 14:04
  • I've been looking for a solution for many days now and I found out, that it has something to do with CSS transition. Others have obviously a similar problem. Here are some approachs. http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela https://davidwalsh.name/translate3d It should be possible to solve it with: -webkit-transform: translate3d(0, 0, 0); – grindking Mar 08 '16 at 18:01