1378707 - SVG: text clippath renders incorrectly when clipped group has animated contents

Status: RESOLVED DUPLICATE of bug 1378710

(Core :: SVG, defect, P2)

Description

[Paul LeBeau]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170628075643

Steps to reproduce:

This is a weird one.  If a clipPath consists of text elements, and the group it is applied to contains only animated elements, then it does not render correctly.

Try the following test case: https://jsfiddle.net/nhoqs7j2/

<svg viewBox="0 0 600 150">

  <clippath id="cp-text">
    <text x="0" y="50%">hello svg clippath</text>
  </clippath>

  <g clip-path="url(#cp-text)" class="colortext">
    <rect x="0" y="0" width="100%" height="100%" class="anim-shape"/>
  </g> 
</svg>

body {
  font-size: 80px;
  font-weight: 800;
}

.anim-shape {
  transform: translate(-600px, 0);
  animation: moving-panel 4s forwards ease-out;
}     

@keyframes moving-panel {
  100% {
    transform: translate(0, 0);
  }
}




Actual results:

While the animation is running, the clipped rectangle does not render correctly. However when it updates at anim end, the render is correct.



Expected results:


== Odd workaround 1 ==

However, if you add a non-animated element to the clipped group, everything renders perfectly - including during the animation.

  <g clip-path="url(#cp-text)" class="colortext">
    <rect x="0" y="0" width="100%" height="1%" fill="transparent" />
    <rect x="0" y="0" width="100%" height="100%" class="anim-shape"/>
  </g> 

https://jsfiddle.net/nhoqs7j2/3/

Interestingly, only that portion of the SVG that overlaps the width of the added element renders correctly. If you reduce the width of this added element, only the first half of the animation is rendered correctly.

== Work around 2 ==

It also seems that if you use non-text elements in the clipPath, the bug no longer manifests.

  <clippath id="cp-text">
    <polygon points="0,0, 600,75, 0,150"/>
  </clippath>

https://jsfiddle.net/nhoqs7j2/2/

Comment 1

[Paul LeBeau]

In fact there might be two bugs here:

1. clipPaths containing text elements
2. clipPaths OR masks applied to groups with animated contents.

A similar SVG that uses a mask, instead of a clipPath, also fails:

See: https://jsfiddle.net/q770saez/1/

<svg viewBox="0 0 600 150">

  <mask id="m">
    <rect width="100%" height="100%" fill="black"/>
    <polygon points="0,0, 600,75, 0,150" fill="white"/>
  </mask>

  <g mask="url(#m)">
    <rect width="100%" height="100%" class="anim-shape"/>
  </g> 

</svg>

(same CSS as above)

But if you apply the same workaround as above (non-animated transparent rect in the group), the animation renders correctly.

https://jsfiddle.net/q770saez/3/

  <g mask="url(#m)">
    <rect x="0" y="0" width="100%" height="100%" fill="transparent" />
    <rect width="100%" height="100%" class="anim-shape"/>
  </g>

Comment 2

[Paul LeBeau]

Actually, please ignore my last comment. A clipPath with animated contents works fine (as long as it doesn't contain text elements). So the mask issue is a related but different bug. I've created a new bug for that.

See bug #1378710

Comment 3

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0005d0bfadf72746ce36f4e8d09d9504b814557e&tochange=ba20391edbec448b56725ef01158176614706b4f

Regressed by: Bug 1313898

Comment 4

[Gerry Chang [:gchang]]

Not a new regression in 54. Mark 54 won't fix and see if we can fix it in 55.

Comment 5

[u459114]

The patch in bug 1378710 can also fix this bug