Closed Bug 1560704 Opened 7 months ago Closed 7 months ago

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

Categories

(Core :: DOM: Animation, defect)

68 Branch
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla69
Tracking Status
firefox-esr60 --- unaffected
firefox67 --- unaffected
firefox67.0.1 --- unaffected
firefox68 + fixed
firefox69 + fixed

People

(Reporter: tlemoine, Assigned: hiro)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

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.

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.

Status: UNCONFIRMED → NEW
Has Regression Range: --- → yes
Component: Untriaged → DOM: Animation
Ever confirmed: true
Flags: needinfo?(bbirtles)
Keywords: regression
Product: Firefox → Core
Regressed by: 1518816

Or Hiro if Brian is not available.

Flags: needinfo?(hikezoe)

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).

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

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.

(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.

Assignee: nobody → hikezoe
Status: NEW → ASSIGNED
Flags: needinfo?(hikezoe)

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).

(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.

Flags: needinfo?(bbirtles)

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.

Pushed by hikezoe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/25ed16786ef9
Revert the change `transform-style: inherit` added to ::-moz-table-wrapper in ua.css. r=birtles
Status: ASSIGNED → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla69

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:
Attachment #9074042 - Flags: approval-mozilla-beta?

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!

Attachment #9074042 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
You need to log in before you can comment on or make changes to this bug.