On iOS chrome and safari, this looping animation that works just absolutely beautifully on desktop gives me a nasty flicker on mobile. I plan on using pictures in front of a background for the final, so I do need to maintain some sort of background color. Can anyone help me get to the bottom of this? It's driving me nuts!
https://codepen.io/tylerwiegand/pen/OJVXoGV
Thanks everyone!
I can't see the flicker you're trying but when there's flickering you can always try a hail Mary and do the backface visibility trick:
.infinite-scroll-container {
transform: translate3d(0, 0, 0);
animation: infiniteScroll 5s linear infinite;
backface-visibility: hidden;
}
It sometimes fixes flicker...
Yeah i tried that and will-change, both didnt do anything. I see a flicker on desktop safari the first time only, mobile safari and chrome every time on my iPhone X.
What devices have you tried on? Trying to narrow down the exact platforms the issue happens on. Thanks!
Tested on Android Chrome. No flicker
Not seeing a flicker on Safari here with 1080p external monitors; maybe it's just on your specific build?
I wish it were so! Everyone at the office gets it on their macbook on the native display with safari, and most of them have it on their mobile safari and chrome. It only happens on the first loop in desktop safari though!
Please or to participate in this conversation.