1734999 - Transform glitch

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[dev]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Steps to reproduce:

After some of latest update there occurs glitch in Firefox stable version.
While ago it occurred on firefox developer edition but I assumed it will be fixed and I didn't report it because It was somehow difficult to find firefox developer edition bug report. And It's still there.
Here's link to example of it https://animxyz.com/docs and click transform tab at left, you should see it.
The problem occurs on latest 93.0 version, on 92 it was working fine.
I tested it on Apple M1 Big sur as on windows, same effect, I leave imgur to show what exactly I mean.
Best

Actual results:

https://imgur.com/a/UBwyffK

Expected results:

https://imgur.com/a/UBwyffK

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Web Painting' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

2021-10-10T08:04:57.882000: INFO : application_repository: https://hg.mozilla.org/integration/autoland
2021-10-10T08:04:57.882000: INFO : application_vendor: Mozilla
2021-10-10T08:04:57.882000: INFO : application_version: 91.0a1
2021-10-10T08:04:57.882000: INFO : platform_buildid: 20210705005108
2021-10-10T08:04:57.882000: INFO : platform_changeset: 96c170b293235ad5eced0c3a5ad555c3c22dd4e5
2021-10-10T08:04:57.882000: INFO : platform_repository: https://hg.mozilla.org/integration/autoland
2021-10-10T08:04:57.882000: INFO : platform_version: 91.0a1
2021-10-10T08:04:58.490000: DEBUG : urllib3.connectionpool: https://firefoxci.taskcluster-artifacts.net:443 "GET /VGoVrcvgTEWlhmpPOkmYLQ/1/public/build/target.zip HTTP/1.1" 200 85667192
2021-10-10T08:05:17.951000: INFO : Narrowed integration regression window from [2db6a494, a1cbf18d] (4 builds) to [96c170b2, a1cbf18d] (2 builds) (~1 steps left)
2021-10-10T08:05:17.960000: DEBUG : Starting merge handling...
2021-10-10T08:05:17.960000: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=a1cbf18d246a19e25f57748bac1a8f8c35becf45&full=1
2021-10-10T08:05:17.961000: DEBUG : redo: attempt 1/3
2021-10-10T08:05:17.961000: DEBUG : redo: retry: calling _default_get with args: ('https://hg.mozilla.org/integration/autoland/json-pushes?changeset=a1cbf18d246a19e25f57748bac1a8f8c35becf45&full=1',), kwargs: {}, attempt #1
2021-10-10T08:05:17.964000: DEBUG : urllib3.connectionpool: Resetting dropped connection: hg.mozilla.org
2021-10-10T08:05:19.517000: DEBUG : urllib3.connectionpool: https://hg.mozilla.org:443 "GET /integration/autoland/json-pushes?changeset=a1cbf18d246a19e25f57748bac1a8f8c35becf45&full=1 HTTP/1.1" 200 None
2021-10-10T08:05:19.548000: DEBUG : Found commit message:
Bug 1717161 - Clamp perspective() values to a minimum of 1px. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D118250

2021-10-10T08:05:19.548000: DEBUG : Did not find a branch, checking all integration branches
2021-10-10T08:05:19.548000: INFO : The bisection is done.
2021-10-10T08:05:19.564000: INFO : Stopped

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Do you know how the page actually creates the animation? Is it using element.animate()? Chrome should behave the same as us here but it clearly isn't so I wonder if the page is doing something different in Chrome compared to Firefox.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1717161

Comment 5

[mix5003]

from How it work page i think it will transform every function as possible. and in default var page it said --xyz-perspective-default is 0px. (https://animxyz.com/docs/#defaults). so i use dev tools and add this css to override perspective everything work fine.

.example-wrap .square {
    --xyz-perspective: none;
}

so i think it produce css that look like this
http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9708

and i think chrome still treat perspective(0) as perspective(none)

Comment 6

[Miko Mynttinen]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)

Do you know how the page actually creates the animation? Is it using element.animate()? Chrome should behave the same as us here but it clearly isn't so I wonder if the page is doing something different in Chrome compared to Firefox.

Chrome Canary works similarly so I think the behavior here is correct.

Comment 7

[mattaningram]

I'm one of the creators of AnimXYZ. I can fix this issue in Firefox and Chrome by setting our default perspective to none instead of 0, however this then breaks perspective in Safari. Is there no way to have perspective set that works in all 3 browsers?

Comment 8

[Emilio Cobos Álvarez (:emilio)]

(In reply to mattaningram from comment #7)

I'm one of the creators of AnimXYZ. I can fix this issue in Firefox and Chrome by setting our default perspective to none instead of 0, however this then breaks perspective in Safari. Is there no way to have perspective set that works in all 3 browsers?

Safari probably doesn't implement perspective(none) yet. If so, using CSS.supports('transform: perspective(none)') or @supports (transform: perspective(none)) to set the Firefox / Chrome rules should work? A bit unfortunate I agree. The good thing is that this is fixed upstream already: https://bugs.webkit.org/show_bug.cgi?id=231361