Bug 230753

Summary:

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

Product:

WebKit

Reporter:

Roland Soos <roland>

Component:

Layout and Rendering

Assignee:

Simon Fraser (smfr) <simon.fraser>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, changseok, dino, esprehn+autocc, ews-watchlist, glenn, graouts, graouts, kondapallykalyan, mmaxfield, pdr, rbuis, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Other

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
iPhone 11 IOS 15.0	none
Reduced testcase	none
Patch	none

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

<rdar://problem/83500636>

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

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

Comment 10 Myles C. Maxfield 2021-10-14 21:24:50 PDT

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?

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