1712301 - SVG ClipPath doesn't render correctly with a single child

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[dnr500]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36

Steps to reproduce:

Here is a jsFiddle that recreates the problem

https://jsfiddle.net/LAD500/n5pzdcxm/

This works correctly in Chrome and Safari where the clipPath renders as a full star, but in Firefox online part for the star appears. Here is the SVG code

<svg viewBox="0 0 293 226" width="293" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 385.233px; min-width: 385.233px; height: 297.143px;">
  <svg viewBox="0 0 293 226" width="293" height="226" x="0" y="0">
    <g clip-path="url(#clip-0d137161-047a-4658-8336-2e55156ce4fe)">
      <g transform="rotate(0 146.5 90.4)">
        <defs>
          <clipPath clipPathUnits="objectBoundingBox" id="clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127" transform="scale(0.005784982935153583 0.0038563296140941045)">
            <path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
          </clipPath>
        </defs>
        <svg height="135.6" width="135.6" x="78.7" y="22.6">
          <g>
            <g clip-path="url(#clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127)">
              <image href="https://dnr500.github.io/stackoverflow/image-to-mask.jpg" id="81a28235-28e3-4636-bbe1-a123cf59bb4f" preserveAspectRatio="xMidYMid slice" height="351.62969343805423" width="234.4" x="0" y="-108.01484671902712" opacity="1" transform="rotate(0) translate(0 0)"></image>
            </g>
          </g>
        </svg>
      </g>
    </g>
  </svg>
</svg>

Actual results:

It appears in FireFox that only part of the star shaped clipPath is rendered

Expected results:

In Chrome of Safari you will see the clipPath render the full star shape

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Robert Longson [:longsonr]]

My advice is not to use transforms with very small numbers.

Comment 3

[Jonathan Kew [:jfkthame]]

So is this basically an issue with loss of precision? I'm pretty sure we've seen somewhat similar issues before, where extreme transforms are used; is there something we could do to improve behavior (e.g. by using double instead of float, if that's relevant)?

I guess SVGs like this are usually being created by tools where the user may not really be aware of the transforms involved, and it's not at all obvious to them why it wouldn't work consistently in all renderers.

Comment 4

[Robert Longson [:longsonr]]

We mostly do use double values for matrices in the SVG code. Rounding tends to happen when we try to display things i.e. in gfx

Comment 5

[Daniel Holbert [:dholbert]]

Note: longsonr brought this bug up when we were discussing related bug 1824804 -- in this bug here, it seems this is some brokenness specifically in the single-child special case that we take for clipPath. If you add an empty <rect></rect> child inside the clipPath element in the jsfiddle from comment 0, then the bug goes away and we draw the whole star, i.e. the intended/expected rendering.

(That's not true for bug 1824804, though -- in that other bug, adding dummy children to the clipPath doesn't help. So: not a duplicate.)

Comment 6

[Alice0775 White]

Regression window:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=daa0dcd1616cbdf5541f548e44662d20d6d67d99&tochange=160983b29535e1c3325d3590192b50edf57d91f6

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1416754

:botond, since you are the author of the regressor, bug 1416754, could you take a look?

For more information, please visit auto_nag documentation.

Comment 8

[Botond Ballo [:botond]]

A regression from 2017, how fun :)

I will investigate.

Comment 9

[Robert Longson [:longsonr]]

Attachment: reduced testcase

Comment 10

[Robert Longson [:longsonr]]

Attachment: interactive testcase

Comment 11

[Robert Longson [:longsonr]]

Attachment: simpler interactive testcase

Comment 12

[Robert Longson [:longsonr]]

Attachment: Bug 1712301 - Fix order of matrix multiplication for bounding box calculation r=botond

Comment 13

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=62c676a410b73319b08b53e56714e070182b5bb6

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aafd7fc8254e
Fix order of matrix multiplication for bounding box calculation r=botond

Comment 15

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/aafd7fc8254e