CODEWITHSUNDEEP
cssiphonescrollmenuoverflow
grindking
grindking

Reputation: 937

Sidebar Navigation menu is flickering while scrolling on iPhone/iPad

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?

Upvotes: 0

Views: 2047

Answers (2)

grindking
grindking

Reputation: 937

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

Upvotes: 3

Leo The Four
Leo The Four

Reputation: 699

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

Upvotes: 0

Related Questions