1524966 - Interaction of CSS clip and transform broke in branch 66

Status: VERIFIED FIXED

(Core :: Layout, defect, P2)

Description

[johanringmann]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

1. Apply a rotation transform to an element
2. Apply a clip to the element

or see JSFiddle: https://jsfiddle.net/21mp8ec9/

Actual results:

In branch 66, the clip is applied after the transform.

In branch 65, the clip is applied before the transform, just like it is with clip-path.

Expected results:

The clip should be applied before the transform.

This is what happens in Chromium 72, and Firefox 65.

Comment 1

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=717a8fb8b842276af0a62b021ac3cf42833659ca&tochange=0026b863c4371ed9856e27b31fb1a61d7ce1e42b

Regressed by: Bug 1514384

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1524966 - Apply CSS clip inside the transform rather than outside.

I think this is the less complex way to get the desired behavior here... The
extra AutoSaveRestore is needed to handle the clipped + transformed + fixed
case, I added a test for that too.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

[Tracking Requested - why for this release]: Regression that would be nice not to ship.

Comment 5

[Liz Henry (:lizzard) (relman/hg->git project)]

Tracking to keep an eye on this - once it lands on m-c please request uplift.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/742718306d3f
Apply CSS clip inside the transform rather than outside. r=mstange

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9041164 [details]
Bug 1524966 - Apply CSS clip inside the transform rather than outside.

Beta/Release Uplift Approval Request

Feature/Bug causing the regression

Bug 1514384

User impact if declined

Wrongly clipped elements, see this bug and duplicate.

Is this code covered by automated tests?

Yes

Has the fix been verified in Nightly?

No

Needs manual test from QE?

Yes

If yes, steps to reproduce

See comment 0.

List of other uplifts needed

None

Risk to taking this patch

Medium

Why is the change risky/not risky? (and alternatives if risky)

Changing a (relatively) well tested and isolated part of the code-base to restore previous behavior in this case.

String changes made/needed

none

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/15259 for changes under testing/web-platform/tests

Comment 9

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/742718306d3f

Comment 10

[Cristian Fogel [:cfogel]]

Confirmed the issue with 66.0b4, 67.0a1 (2019-02-04) on Windows 10x64.
Fix verified with 67.0a1 (2019-02-06) on Windows 10, macOS 10.13, Ubuntu 16.04.

Comment 11

[Ryan VanderMeulen [:RyanVM][PTO June 24-28]]

Comment on attachment 9041164 [details]
Bug 1524966 - Apply CSS clip inside the transform rather than outside.

[Triage Comment]
Fixes some instances of wrongly-clipped elements. Approved for 66.0b6.

Comment 12

[Ryan VanderMeulen [:RyanVM][PTO June 24-28]]

https://hg.mozilla.org/releases/mozilla-beta/rev/617b5ae30c05

Comment 13

[Cristian Fogel [:cfogel]]

Verified fix with 66.0b13 on the same OSs mentioned above.