Bug 262869

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>