CODEWITHSUNDEEP
csscss-transitionsmobile-safaricss-transforms
Illes Peter
Illes Peter

Reputation: 1674

iOS Safari flicker when scrolling

I have a weird issue with a menu on a production site, which only happens in iOS Safari.

You can recreate it by accessing https://www.romanianfriend.com on an iPhone, opening the hamburger menu, then opening one of the submenus like "Top attractions in Romania" or "Romanian adventures and nature tours", and finally scrolling downwards on the menu. You will see the items of the submenu going white and then (sometimes) back again.

You can also see a short screencast I made of the issue: https://youtu.be/aWL9IW-4Ajc

I tried applying

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

on the ul.menu-level-3 and also on div.sb-sliderbar-menu, but to no effect.

The menu uses sliderbars.js to open and Bootstrap collapsible component for the submenu.

Any help would be greatly appreciated.

Upvotes: 1

Views: 3786

Answers (1)

John Doherty
John Doherty

Reputation: 4085

This only appears to be a problem when you use overflow: auto and -webkit-overflow-scrolling: touch on the same element.

I resolved this issue by replacing:

overflow: auto;
-webkit-overflow-scrolling: touch;

with:

overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;

Hope it helps.

Upvotes: 1

Related Questions