1613684 - Elements dimension and position is changing

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[Marian]

Attachment: Preview.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Websites: https://www.twitch.tv/, https://hub.warframestat.us/

Actual results:

The dimension of the elements is changing and the text is moving down.

Comment 1

[Erik Nordin [:nordzilla]]

Andronachi,

Thanks for reporting this bug!

This is kind of a necessary side-effect of how 3d transforms are implemented in Firefox: when a transform is applied or removed, the element gets promoted to its own 'layer' and this can cause a subtle shift content in some cases, due to changes in rounding behavior from content being rendered into a single surface vs. multiple surfaces that are composited together.

The workaround for this sort of thing is for sites to add will-change: transform; on elements that they intend to apply a dynamic transform to. This lets the element become a layer up-front, avoiding the unexpected "snap" when the transform is added.

I have tested this on both sites, and it appears to resolve the issue on my MacOS machine:

RE: https://hub.warframestat.us/

.panel-header {
    will-change: transform;
}

RE: https://www.twitch.tv/

.tw-hover-accent-effect__children {
    will-change: transform;
}

I am going to re-classify this under Web Compatibility.

Comment 2

[Erik Nordin [:nordzilla]]

Hi Mike,

Perhaps someone on the webcompat team could reach out to Twitch about this, and maybe also report it to the Warframe folks if possible.

Comment 3

[Marian]

Attachment: Spigot.png

I found that code to make my animation to be smooth and not jerky on: https://bugzilla.mozilla.org/show_bug.cgi?id=1608243
I put it on body of the page and animation is smooth how should be. But the Horizontal Scrollbar is bigger.

Comment 4

[Mike Taylor [:miketaylr]]

Sure, we can try to reach out.

Comment 5

[Marian]

This happening to the Firefox Homepage when toggle Top Sites and Highlights.
Still not sure why need in Firefox is that much visible. In Chrome is not that bad.

Comment 6

[Raul Bucata]

We appreciate your report. I was not able to reproduce the issue. Navigating on both twitch.tv and warframestat.us, the elements do not present any issues, although warframestat.us seems to have a little upgrade in the UI.

Reporter, is the issue still reproducible for you?

Tested with:

Browser / Version: Firefox Release 100.0.2 (64-bit)/ Firefox Nightly 102.0a1 (2022-05-23) (64-bit)
Operating System: Windows 10 PRO x64

Comment 7

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:denschub, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[Dennis Schubert [:denschub]]

Closing as worksforme as per comment 6 and my own quick testing.