Created attachment 468116 [details] video of flickering text's Hello there, Since the update to iOS 17, we have encountered multiple instances where our webpage exhibits an unusual flickering behavior. This issue has been observed in the Safari browser on iOS 17 devices. We suspect it may be related to small animations within a <div></div> element causing the entire site to repaint, although Chrome does not exhibit this behavior. Unfortunately, reproducing this issue consistently has proven to be challenging. what we learned so far: - does not happen in app-embbeded WKWebView - repainting also happens on macos safari 17 (but flickering is not happening) - Attempted to apply common CSS solutions, such as translateY(0) and backface-visibility, didn't help - the flickering disappears when we remove the animation(s). it is not specifically bound to this single animation, we removed almost all of the `animation:` styles, but this last one, is the one we are having troubles removing. there is a video attached, which shows the 3 dots, animating correctly, but also the texts of the headline "flickering" <style> @keyframes three_dots { 0% { transform: translateY(0); } 33% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } .object-flag__icon { display: flex; margin-right: 10px; &--red_dot { .object-flag__dot { animation: red_dot 1000ms ease-in-out infinite; } } &--three_dots { .object-flag__dot { // animation: three_dots 1000ms ease-in-out infinite; animation-delay: 3600ms; &:nth-child(1) { animation-delay: 0ms; } &:nth-child(2) { animation-delay: 333ms; } &:nth-child(3) { animation-delay: 666ms; } } } } </style>
@Helmut - can you attach reproducible test case based on below CSS? Website URL - https://www.krone.at/ (in video)
here is a test page: https://www.krone.at/xxtest6 the font does not constantly flicker as in my first recording. but i also attached a new recording, showing ios17 simulator and safari dev-tools with paint flashes. once the animation is removed ``` // i still love jQuery $(".object-flag").remove(); ``` the repaint flash-stops. the area the repaint shows, is usually also the area that suffers the font flicker. for me it looks like a weird "lets repaint the world" - because of the small css animations
Created attachment 468124 [details] safari + simulator
Created attachment 468125 [details] desktop safari also repaints
to test the mobile page on desktop safari use: https://www.krone.at/xxtest6?KRN_FORCE_FAM=mobile i tried to record a repaint video with chrome too, but chrome does not repaint anything (Expected the three dots to be flashing)
for further debugging, once you removed the animations with ``` $(".object-flag").remove(); ``` you can re-enable it with: ``` $(".object-flag__dot").css("animation", "three_dots 1000ms ease-in-out infinite"); ``` expected behaviour: - no re-paint et-al (like chrome) - if re-paint, than only inside the div of the dots.
<rdar://problem/116707614>
With Safari 15.6.1 on macOS 12.5.1 I can see a lot of flashing on https://www.krone.at/xxtest6?KRN_FORCE_FAM=mobile, much more so than on Safari 17. Going to see how things behaved with the final Safari 16 builds.
I don't think we'll be able to diagnose this using the paint flashing tools on macOS since as far as I can tell the current version of Safari (17) is the one that yields the least amount of repaints on https://www.krone.at/xxtest6?KRN_FORCE_FAM=mobile. I will take a look at iOS specifically. Helmut, in your experience, does this reproduce on all types of iOS devices you have tested, or is it more specific to certain devices?
I cannot see any flashing with an iPhone 14 Pro running iOS 17.0.3 (21A360) on https://www.krone.at/xxtest6. Helmut, if you can reproduce the issue still with that URL, could you share your hardware configuration?
starting with iOS17.1 (beta 3) - it seems to be fixed
I think we should close this for now, but if you see it appear again, please open a new bug with details on the software / hardware configuration. Thanks Helmut.