1350804 - SVG stroke affects z-index layering of 3D transformed shapes

Status: RESOLVED WORKSFORME

(Core :: SVG, defect, P3)

Description

[Amelia Bellamy-Royds]

Attachment: 3D-orthographic.svg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.110 Safari/537.36

Steps to reproduce:

I haven't figured out what exact combinations of properties cause the problem.

But the key features are:

- SVG shape elements
- with strokes
- 3D transformations
- in a preserve-3d context

And some how that all adds up to the z-index layering being incorrect.

See the attached sample .svg file.


Actual results:

Because of the low-resolution rendering (bug #994042), I initially thought that the transform was incorrect, or that the colors were being blended incorrectly.  

Printing to PDF fixed the resolution, but not the layering.  But removing the stroke magically fixed the layering.


Expected results:

Stroke should not affect the element paint layers or 3D transforms.

Comment 1

[Amelia Bellamy-Royds]

OK, I figured out what's going on here. Still a bug, but not quite as obscure as I thought.

The stroke triggers the layering problem because the stroke extends the edges of the shape just enough that it intersects with the other shape layer.

It looks like the master bug for "intersecting 3D planes get painted in wrong order" is
https://bugzilla.mozilla.org/show_bug.cgi?id=689498

So this is a dupe of that.

Comment 2

[Miko Mynttinen]

Thank you for the report Amelia.

I am reopening this because I believe that this is not a dupe of the bug 689498 (which should be fixed in Nightly on most platforms).

The root problem here seems to be different behavior depending on whether the SVG file is opened by itself or placed inside an IMG tag.

How to reproduce this bug:
1. Open the SVG by clicking the file in Bugzilla UI
2. Open the SVG in new tab/window
3. Compare the result.

Comment 3

[Miko Mynttinen]

Attachment: SVG file nested in an IMG tag and in a new window.

I have added a screenshot from the latest Nightly.

Comment 4

[Amelia Bellamy-Royds]

Attachment: 3D-perspective.svg

Thanks for looking a little deeper Miko.

As I was playing around with other demos, I found a quirk that may help you narrow down the problem.

The two attached files create a similar box shape, but use perspective & perspective-origin, instead of a group rotation, to make the sides visible.  The only difference between the two files is that one has `transform-style: preserve-3d` on the group containing the box.  This one has the layering problem.  With `auto` transform style on the group (which has the perspective settings, but only a 2D transform itself) the layers are calculated correctly (in FF Dev Edition, v54.0a2).

Comment 5

[Amelia Bellamy-Royds]

Attachment: 3D-perspective-broken-in-Firefox.svg

Comment 6

[Miko Mynttinen]

Amelia, your initial suspicion was correct. This bug is indeed related to plane splitting: BasicLayers implementation cannot draw arbitrary layer geometry yet. The (future) work for this is tracked in the bug 1353430.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Amelia Bellamy-Royds from comment #0)
> Created attachment 8851469 [details]
> 3D-orthographic.svg

Another note is that using devtools to add 'filter: blur(2px)' to the svg element causes everything to disappear...

Comment 8

[Amelia Bellamy-Royds]

@dbaron

On Firefox 55 on Windows, blurring the parent SVG in that file is causing *some* layers (the sides of the box to disappear, but not everything. 

I'll attach a screenshot for you to compare, but it's probably worth a separate bug report (if there isn't a relevant one already).  If you were blurring a particular rectangle, then it might be the same issue (creating an intersection that interferes with layering calculations).  But blurring the parent suggests that something's going wrong in the compositor.

Comment 9

[Amelia Bellamy-Royds]

Attachment: Screen Shot re Comment #8

Comment 10

[Miko Mynttinen]

The relevant code for this can be found at http://searchfox.org/mozilla-central/source/gfx/layers/basic/BasicLayerManager.cpp#703.
Currently we are sorting the child layers without geometry, meaning that we discard the split parts of the layers, resulting in possibly incorrect rendering with intersections. In order to fix this, we would need to pass the polygons representing layer bounds all the way down to the actual drawing code.
In some cases, such as with BasicImageLayer::Paint(), we could trivially call FillPathWithMask() instead of FillRectWithMask() and be done. A more tricky case is PaintThebes() for PaintedLayers, that needs a way to deal with polygonal clipping.

Comment 11

[Astley Chen (inactive)]

(In reply to Miko Mynttinen [:miko] from comment #6)
> *** This bug has been marked as a duplicate of bug 1353430 ***

Let's not resolved this bug as a dupe of bug 1353430 as the importance might be inconsistent across components. Also, it would be easier to get notified after bug 1353430 is fixed and then verify these SVG cases again.

Comment 12

[Robert Longson [:longsonr]]

Seems OK now.