773615 - Backs of CSS transformed elements show through, angle dependent.

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[nemo]

This demo is described here:
http://updates.html5rocks.com/2012/07/Writing-a-flippable-book-using-CSS-Regions-and-3D-transforms

On loading, the defaults in firefox result in the back of the cover being visible (and the cover invisible).
So you see "By Edgar Allen Poe" (reversed) instead of "A DESCENT INTO THE MAELSTRÖM" on a blue background.

This bug is true for all pages of the book as you click through it.

If you slowly adjust the book to an oblique angle, the cover will pop into view, and all the other pages will be functional.

BTW, until I enabled layers accel, this demo was horribly slow on my linux machine, and had a lot of visual artifacts (edges of pages being left behind as the content was animated).  I'm happy to see that layers accel seems to work great now on my linux box - it didn't in the past.

http://fhtr.org/html-book/ also has the same problem.

Comment 1

[Aryeh Gregor (:ayg) (no longer with Mozilla)]

.book > div > div:first-child {
  /* The front side of a page should be slightly above the back of the page. */
  +transform: translate3d(0px, 0px, 0.02px);

Is there any guarantee that we'll actually resolve a difference of 0.02px in practice when doing z-ordering?  That should be a non-zero nscoord value, but I don't know if we're that precise when doing z-ordering.  The author here should be using backface-visibility -- this is exactly what it's designed for!

Comment 2

[nemo]

lol.  I assumed it *was* using backface-visibility.
Heh. That's silly.
Well. There's a lot of broken Chrome-specific stuff on htmlrocks website.

Comment 3

[nemo]

Hrm. Now. How *would* you do that w/ backface-visibility?
I mean, this sort of stuff http://m8y.org/tmp/testcase248.xhtml
makes sense to me (apart from it being a bit buggy w/o layers acceleration in firefox)
but I'm having a hard time visualising how it would work on that page.
The front and back are two separate layers stacked one above the other right? So if you set backface visibility and that ordering wasn't quite right, you'd get a blank page instead of text showing through, but surely that's still broken?

Comment 4

[nemo]

Hm. Now I wonder if that was to work around some Chrome bug, since testcase248.xhtml and the page it came off of are totally screwed up in my Chromium 18 install...

Comment 5

[nemo]

... or at least, I'm seeing the title text shining through in Chromium on testcase248 - but anyway. That's totally unrelated to the bug. Sorry.

Comment 6

[Aryeh Gregor (:ayg) (no longer with Mozilla)]

(In reply to nemo from comment #3)
> Hrm. Now. How *would* you do that w/ backface-visibility?

Getting rid of "transform: translate3d(0px, 0px, 0.02px);" and adding ".book > div > div { backface-visibility: hidden }" would probably do the trick.

Comment 7

[Gregory Pappas [:gregp]]

Reporter, are you still experiencing this issue?

Comment 8

[nemo]

It appears to still be broken (now hosted on https://fhtr.org/html-book/ linked off of the demo which is now on chrome.com)

But yeah, as noted in this bug's discussion, the way this was implemented was probably a hack due to the limitations of chrome at that time (lacking support for certain CSS features), and like many things that were featured on html5rocks where the intent was to highlight chrome and not so much other browsers, breaking in other browsers was probably not a huge concern, and maybe even a bonus ;)

Given the demo is much less high profile now, and was probably a bad implementation anyway, this could probably be closed or made a (very) low parity bug.

I mean, it's still on their guides, so I guess there's a risk of people copying and replicating it and getting stuff that doesn't work in Firefox.