1560704 - 3D css transforms on table and tbody causes invisible td text

Status: RESOLVED FIXED

(Core :: DOM: Animation, defect)

Description

[tlemoine]

Attachment: Side by side comparison of demo in FF67 and FF68

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

Steps to reproduce:

In any FF68 Mac beta:

1. Create a table with the structure table > tbody > tr >td. In the td, add some text, such as "Hello"
2. In a stylesheet or style block, add the style for the table transform-style: preserve-3d; For the tbody, add transform: translate3d(0, 0, 0);

Minimal demo: https://codepen.io/toddlemoine/pen/LKWBPa

---

During a recent test session for our SaaS app, a table didn't render correctly in a Firefox 68 beta where it rendered correctly in FF 67 as well as rendered fine in Chrome and Safari.

I traced it down to our use of preserve-3d and/or translate3d on the tbody (these properties are used for a sticky header effect when scrolling a large table. It may seem a little unorthodox, but it's worked fine until now, even in IE11).

The issue wasn't in the last FF67 beta, but appears in FF68 beta 1 and throughout the betas, to the latest.

Actual results:

Text inside cell is rendered, but invisible.

Expected results:

Text inside cell is visible.

Comment 1

[Kohei Yoshino]

This is a regression from Bug 1518816 as per mozregression. Brian: do you have time to take a look?

[Tracking Requested - why for this release]: Partial content can be invisible when CSS transform is used.

Comment 2

[Kohei Yoshino]

Or Hiro if Brian is not available.

Comment 3

[Brian Birtles (:birtles)]

It's on my list to look at this but it probably won't be until next week.

The next step would be to bisect the patches from bug 1518816 and then bisect the offending patch line by line (although I wonder if it comes about from making transform-style inherit from inner to wrapper).

Comment 4

[Hiroyuki Ikezoe (:hiro)]

It's the first change. https://hg.mozilla.org/mozilla-central/rev/dd7400edcf025f74b42eb6864704d2f35c192ba3. And yeah the transform-style: inherit line.

Comment 5

[Julien Cristau [:jcristau]]

FWIW next week is RC week for 68, so it'd likely be too late for 68.0 by then.

Comment 6

[Brian Birtles (:birtles)]

We should just drop that transform-style: inherit line then. I think it was a speculative fix that doesn't affect any tests so we can probably drop it and then investigate why it was causing this failure.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

(In reply to Brian Birtles (:birtles) from comment #6)

We should just drop that transform-style: inherit line then. I think it was a speculative fix that doesn't affect any tests so we can probably drop it and then investigate why it was causing this failure.

Yeah, totally agree. I think the transform-style: inherit exposed a pre-existing issue on preserve-3d and fixing the issue will end up fighting against table and wrapper frames confusions, it probably couldn't be uplifted.

I am going to write a patch with a test case.

Comment 8

[Hiroyuki Ikezoe (:hiro)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=9548d9317b339de501b14bcc34e55ce9aad95c9f

I confirmed locally that reverting the change doesn't affect the tumbler.com issue (bug 1518816).

Comment 9

[Brian Birtles (:birtles)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #8)

https://treeherder.mozilla.org/#/jobs?repo=try&revision=9548d9317b339de501b14bcc34e55ce9aad95c9f

I confirmed locally that reverting the change doesn't affect the tumbler.com issue (bug 1518816).

Thanks Hiro. That looks great.

Comment 10

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1560704 - Revert the change `transform-style: inherit` added to ::-moz-table-wrapper in ua.css. r?birtles

It caused rendering issues just like a reftest in this commit. We don't know
the reason but fixing it will be some amount of work which couldn't be uplifted
to 68. So we just revert the change here now. Probably we should revisit the
problem once we got a bug report that the lack of the transform-style: inherit
causes rendering issues.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/25ed16786ef9
Revert the change `transform-style: inherit` added to ::-moz-table-wrapper in ua.css. r=birtles

Comment 12

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/25ed16786ef9

Comment 13

[Hiroyuki Ikezoe (:hiro)]

Comment on attachment 9074042 [details]
Bug 1560704 - Revert the change transform-style: inherit added to ::-moz-table-wrapper in ua.css. r?birtles

Beta/Release Uplift Approval Request

• User impact if declined: Uses are not able to see some contents
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): The change is just reverting a single line introduced in bug 1518816 and the single line is the cause of this bug.
• String changes made/needed:

Comment 14

[Julien Cristau [:jcristau]]

Comment on attachment 9074042 [details]
Bug 1560704 - Revert the change transform-style: inherit added to ::-moz-table-wrapper in ua.css. r?birtles

approved for 68.0b14, thanks!

Comment 15

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/releases/mozilla-beta/rev/d763b1f288a3