1625698 - Text rotation not working properly

Status: NEW

(Core :: Web Painting, defect, P2)

Description

[Ronald Tilby]

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

Steps to reproduce:

Load https://graphics.reuters.com/HEALTH-CORONAVIRUS-UNKNOWNS/0100B5M447T/index.html

Actual results:

The words "knowns" shows normally, but when the text rotates, both "knowns" and "unknowns" show on top of each other.

This problem shows with current nightly:76.0a1 (2020-03-28) (64-bit) and current production 74.0 builds on Windows 10.
The problem does NOT occur on google chrome version 80.

Expected results:

The words "knowns" and "unknowns" should alternately show with rotation animation.

Comment 1

[Alice0775 White]

Attachment: reduced html

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=de17e5deb35d&tochange=88723262c85c

Comment 2

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

The priority flag is not set for this bug.
:mattwoodrow, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Matt Woodrow (:mattwoodrow)]

So, strictly speaking, this is rendered correctly as the spec requires, and other browsers get it wrong.

backface-visibility doesn't create a stacking context, and hides the backface of that element. Thus the backface of 'flip-card-back' is hidden, but the backface of 'headline-text' is not.

I'm working to get the spec updated to reflect what other browsers do, and then we'll change firefox to match their behaviour.

Comment 4

[Matt Woodrow (:mattwoodrow)]

The short term fix is to make your elements with backface-visibility:hidden also a stacking context in some other way (like transform:translate(0)).

Comment 5

[Marcela (Please NI request to Brindusa Tot)]

I was able to reproduce this issue on latest Nightly version 86.0a1 (2021-01-13) (64-bit), Beta version 85.0b8 (64-bit) and Release version 84.0.2 on Windows 10. I will change flags accordingly.