1517402 - Problems with 3D-space on preserve-3d CSS

Status: RESOLVED DUPLICATE of bug 1505222

(Core :: Graphics: WebRender, defect, P3)

Description

[Hallo89]

Attachment: A visualisation of the problem

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

Steps to reproduce:

I created a simple 3D cube with CSS, where every face has an image attached (the gray square), as seen on the attachment and rotated it around the (horizontal) Y-axis (by mouse-dragging in the attachment). The rotating element has got `backface-visibility: hidden` and its child and itself have got `transform-style: preserve-3d`.


Actual results:

When the Y-rotation comes near 90deg or -90deg, the attached images get blurry and upon hitting 90/-90deg, the cube becomes invisible:
The wrapper (here `.wrapper1`) is despite its 3D-appearance still in the 2D planar space, meaning that once rotated by 180deg, because its backfaces are hidden, it will visually disappear.
This is, as far as I understand, not a wrong behavior, according to the `transform-style: preserve-3d` specification, as this property only allows an element's children to be in 3D-space, not the element itself. However, as nothing was mentioned in the FF65 release notes, Firefox 64- (and all other rendering engines) do it the expected way, I figured it is a bug.
When countering this behavior by putting `preserve-3d` on its parent, `.wrapper2`, one can see that the 3D-space is ending at Z = 0 (as the cube is placed from Z=-200px to Z=200px).
Additionally, putting `overflow: hidden` on this element (wrapper2) negates the `preserve-3d`.
However, both of the latter problems do not appear if the `wrapper2`-node is deleted and its properties are moved onto `body`


Expected results:

wrapper1 shouldn't count as planar, making its backfaces invisible when rotated, the 3D-space shouldn't be limited to Z=0 and I don't know what's the matter with overflow.
(I'm probably missing some deeper understanding but I tried my best to explain this. I hope the attachment gives a good example and sorry for the vague title but I couldn't explain this problem in a sentence.)

Comment 1

[Hallo89]

Attachment: Visualization of the bug (fixed).html

Fixed mouse rotation

Comment 2

[Miko Mynttinen]

This only happens with WebRender.

Comment 3

[Dzmitry Malyshau [:kvark]]

I can't repro on either Windows or Linux. Hallo89, could you please provide about:support?

Comment 4

[Darkspirit]

It does no longer disappear. Is everything fixed now?

mozregression --find-fix --bad 2019-01-04 --good 2019-01-24 --pref gfx.webrender.all:true -a https://bug1517402.bmoattachments.org/attachment.cgi?id=9034332
19:15.68 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=f722c4dbd4ccc19911de8ad05423363e0b5b2da7&tochange=2195f346d368042482357dc178255030ca610265

2195f346d368 Emilio Cobos Álvarez — Bug 1505222 - Pass TransformStyle::Preserve3d to WebRender more often for perspective display items. r=mattwoodrow

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Coolio then :)

Comment 6

[Hallo89]

Indeed magically seems to be fixed, on both 65.0 release (beta channel) and nightly.
Putting a transform-style: preserve-3d on the wrapper of the 3D-containing wrapper (.wrapper2 in the attachment) still culls the 3D-space on the Z-axis starting at 0 (meaning handling the .wrapper2 still as flat although not culling its 3D) but this happens in today's blink/webkit as well and not doing it has no negative consequences, so this isn't anything to worry about I suppose.