937137 - CSS animation/transform/translate/scale z-fighting

Status: RESOLVED DUPLICATE of bug 689498

(Core :: Graphics, defect)

Description

[Milan Sreckovic [:milan] (needinfo for best results)]

+++ This bug was initially created as a clone of Bug #927135 +++

From Ana Tudor (@thebabydino), who uses Firefox again but still runs demos during talks in Chrome. She says

"""
1. 3D. Example
http://codepen.io/thebabydino/pen/yehGi

The way elements are displayed on top of the other is not always
determined by the 3D positioning and I can't even find a pattern for this.

I guess animation in general, not just 3D. Gets obvious when taken to
the extreme with animating hundreds of things at the same time.
"""
Extracting the z-fighting issue into a separate bug, the original one covering the CPU usage.

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

Matt, your name popped up as somebody that could shine some light on this issue

Comment 2

[Matt Woodrow (:mattwoodrow)]

Yeah, this is because we don't have proper plane splitting.

We currently have an algorithm that tries to come up with a best guess about which order to draw the layers in, and gives up if it can't find a valid one.

When a bunch of planes get drawn really close together (as is the case when the cube is fully closed) then a bunch of the planes tend to intersect (usually just the very edge pixels overlap, maybe because of rounding/floating point errors).

Intersecting planes is something that there's no 'right' answer for without splitting, so we give up and guess an order. As you can see this order isn't always what we want :)

I could probably have another go at tuning the guess, but last time I did that I ended up regressing other examples :(

Comment 3

[Milan Sreckovic [:milan] (needinfo for best results)]

In some cases, this looks like what the system z-fighting would look like, (two pyramid triangles matching "exactly" when the cube is closed), but in some cases it looks like it's a pyramid side and base that are fighting.  That's still covered by the explanation?
On a side note, on my mac, this particular example only runs in Firefox.

Comment 4

[Matt Woodrow (:mattwoodrow)]

Yeah, it's usually because a group of planes all intersect each other and form a cycle that we can't resolve. So we just arbitrarily pull one out to break it.