Bug 230753 – REGRESSION (r276370): Elements with animated transform property might not properly rendered

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Roland Soos]

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.

[Simon Fraser (smfr)]

I can reproduce on macOS too.

[Radar WebKit Bug Importer]

<rdar://problem/83500636>

[Simon Fraser (smfr)]

Bistected to https://trac.webkit.org/changeset/276370/webkit

[Roland Soos]

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:
https://smartslider3.com/bugs/webkit/animatedtransform/

[Simon Fraser (smfr)]

This reproduces in MiniBrowser if you use the Safari user agent. Seems like the content is UA-sniffing.

[Simon Fraser (smfr)]

Created attachment 441314 [details]
Reduced testcase

[Simon Fraser (smfr)]

The problem occurs at the computation of the outlineBoundsForRepaint in RenderLayer::computeRepaintRects() using the geometry map.

[Simon Fraser (smfr)]

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())
  return false;

does not return, so it incorrectly uses the geometry map when there is a transform.

[Simon Fraser (smfr)]

Created attachment 441329 [details]
Patch

[Myles C. Maxfield]

Comment on attachment 441329 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=441329&action=review

> Source/WebCore/rendering/RenderGeometryMap.cpp:153
> +        if (current->hasTransformRelatedProperty() && (style.hasTransform() || style.translate() || style.scale() || style.rotate() || style.hasPerspective()))

Surely there’s a more direct way of representing this condition?

[EWS]

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].