CODEWITHSUNDEEP
iosscrollflickermobile-webkit
aujus
aujus

Reputation: 31

Website flickers on scroll - iOS mobile. How do I fix this?

My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.

https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html

I've read through some similar forums discussing 

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

But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.

I've used 

-webkit-overflow-scrolling: touch;

in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.

I just want simple, normal mobile scrolling that we're all used to expecting.

Thanks so much in advance!

EDIT I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.

Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.

EDIT 2 Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?

Upvotes: 1

Views: 2372

Answers (2)

raiku
raiku

Reputation: 105

I had the same issue.

My problem was the parents z-index being negative. That led to the flickering and I didn't notice it on any other browser besides iOS Safari.

After I fixed the z-indexes of all elements involved, I had no more flickers.

Upvotes: 0

aujus
aujus

Reputation: 31

Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!

Upvotes: 1

Related Questions