Bug 230753 - REGRESSION (r276370): Elements with animated transform property might not properly rendered
Summary: REGRESSION (r276370): Elements with animated transform property might not pro...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
Keywords: InRadar
Depends on:
Reported: 2021-09-24 09:02 PDT by Roland Soos
Modified: 2021-10-15 08:26 PDT (History)
15 users (show)

See Also:

iPhone 11 IOS 15.0 (781.20 KB, video/quicktime)
2021-09-24 09:02 PDT, Roland Soos
no flags Details
Reduced testcase (1.89 KB, text/html)
2021-10-14 17:45 PDT, Simon Fraser (smfr)
no flags Details
Patch (4.48 KB, patch)
2021-10-14 21:17 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Roland Soos 2021-09-24 09:02:27 PDT
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.
Comment 1 Simon Fraser (smfr) 2021-09-24 10:00:28 PDT
I can reproduce on macOS too.
Comment 2 Radar WebKit Bug Importer 2021-09-24 10:01:30 PDT
Comment 3 Simon Fraser (smfr) 2021-09-24 10:40:09 PDT
Bistected to https://trac.webkit.org/changeset/276370/webkit
Comment 4 Roland Soos 2021-09-27 01:10:53 PDT
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:
Comment 5 Simon Fraser (smfr) 2021-10-13 15:55:43 PDT
This reproduces in MiniBrowser if you use the Safari user agent. Seems like the content is UA-sniffing.
Comment 6 Simon Fraser (smfr) 2021-10-14 17:45:31 PDT
Created attachment 441314 [details]
Reduced testcase
Comment 7 Simon Fraser (smfr) 2021-10-14 18:58:01 PDT
The problem occurs at the computation of the outlineBoundsForRepaint in RenderLayer::computeRepaintRects() using the geometry map.
Comment 8 Simon Fraser (smfr) 2021-10-14 19:04:56 PDT
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.
Comment 9 Simon Fraser (smfr) 2021-10-14 21:17:34 PDT
Created attachment 441329 [details]
Comment 10 Myles C. Maxfield 2021-10-14 21:24:50 PDT
Comment on attachment 441329 [details]

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?
Comment 11 EWS 2021-10-15 08:26:05 PDT
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].