Created attachment 439152 [details]
iPhone 11 IOS 15.0
This issue affects only Safari 15.
Steps to reproduce:
1. Open https://smartslider3.com/carousel-with-lightbox/
2. On the top slider (coffee content) Change slides with the arrow on desktop or swipe on mobile
Result in Safari 15: some part of the images stay rendered on the screen while it should not.
I can reproduce on macOS too.
Bistected to https://trac.webkit.org/changeset/276370/webkit
The problem is related to the fact that we are animating the .n2-ss-slider-pipeline element's transform-> translate() value. When we switch it to translate3d() there is no problem during the animation.
I will fix this on our main site, but as a reference, I made a static page which produce the error:
This reproduces in MiniBrowser if you use the Safari user agent. Seems like the content is UA-sniffing.
Created attachment 441314 [details]
The problem occurs at the computation of the outlineBoundsForRepaint in RenderLayer::computeRepaintRects() using the geometry map.
The logic in https://trac.webkit.org/changeset/276370/webkit is wrong.
In this content, the element has transform and preserves-3d, so:
if (current->hasTransformRelatedProperty() && !current->style().preserves3D())
does not return, so it incorrectly uses the geometry map when there is a transform.
Created attachment 441329 [details]
Comment on attachment 441329 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=441329&action=review
> + if (current->hasTransformRelatedProperty() && (style.hasTransform() || style.translate() || style.scale() || style.rotate() || style.hasPerspective()))
Surely there’s a more direct way of representing this condition?
Committed r284247 (243056@main): <https://commits.webkit.org/243056@main>
All reviewed patches have been landed. Closing bug and clearing flags on attachment 441329 [details].