RX and RY (border-radius) lags while animating SVG <rect> element in Chrome

[wcomp]

I need to change the width of an SVG rect element on hover. Everything works fine on the forward animation but on the reverse animation the right side of the rect element (the side that is moving) seems to be lagging, in effect compromising the curved edges, flattening them out for a moment. This issue happens in Chrome. It is working fine in FireFox. I have isolated the problem in the Codepen below. Hover over the slot and remove the mouse pointer from the slot. The reverse animation is where the problem is. The rect element is inside of an SVG mask element. Might that be the cause of the issue? Codepen is here: 

The SVG markup is as follows:

<svg class="slot" xmlns="http://www.w3.org/2000/svg">

   <mask maskUnits="userSpaceOnUse" id="bg_mask">
      <rect id="slot_rectangle" width="100%" height="100%" rx="10px" ry="10px" fill="#fff" />
   </mask>

   <image preserveAspectRatio="xMidYMid slice" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" height="100%" width="100%" mask="url(#bg_mask)" />

</svg>

 

See the Pen abOqZZg by Wcomp (@Wcomp) on CodePen

[ZachSaucier]

Hey wcomp. I'm not seeing any weird rendering in Chrome on Catalina. What OS are you on?

 

As a side note, why not use GSAP 3? And you can simplify your logic a good bit I believe. Here's how I'd set it up (make sure you use a class for the inner rectangle so that you can have multiple of these on the same page, which is what I assume you need since you were looping through the slots):

See the Pen eYNVWMV?editors=0010 by GreenSock (@GreenSock) on CodePen

[wcomp]

1 hour ago, ZachSaucier said:

Hey wcomp. I'm not seeing any weird rendering in Chrome on Catalina. What OS are you on?

 

As a side note, why not use GSAP 3? And you can simplify your logic a good bit I believe. Here's how I'd set it up (make sure you use a class for the inner rectangle so that you can have multiple of these on the same page, which is what I assume you need since you were looping through the slots):

 

 

Thanks for the code suggestions. The issue is definitely there. Only in Chrome though. I'm using the latest update of Windows 10 Home. Quite frustrating this is. It's like the RX and RY attributes are being ignored as the right side of the rectangle animates back the the starting position on mouseleave. The weird thing is, when I take a screenshot of the rectangle mid animation and paste it in Photoshop, the problem isn't there. The rounded edges look just fine. Really odd....

[PointC]

Just tested on Windows 10 and Chrome 80.0.3987.132 and didn't see any weirdness.

[wcomp]

11 minutes ago, PointC said:

Just tested on Windows 10 and Chrome 80.0.3987.132 and didn't see any weirdness.

Here is a better example of the issue: 

See the Pen abOqyML?editors=1111 by Wcomp (@Wcomp) on CodePen

In that codepen click on the red circle as the red circle animates either way the right or left side is clipped off. I have edited the image below in Photoshop to illustrate whats going on.

[PointC]

hmmm... I'm not seeing any clipping in Chrome (or any other browser). Are you seeing this on just one computer or multiple machines?

[wcomp]

7 minutes ago, PointC said:

hmmm... I'm not seeing any clipping in Chrome (or any other browser). Are you seeing this on just one computer or multiple machines?

It is doing it on my laptop and one of my desktops. I have a more powerful desktop that I use for graphics stuff. I just tried it on that computer and it is actually working fine. So I'm guessing it has something to do with Chrome on smaller screens. I'm not sure.

[ZachSaucier]

21 minutes ago, wcomp said:

In that codepen click on the red circle as the red circle animates either way the right or left side is clipped off. I have edited the image below in Photoshop to illustrate whats going on.

That's pretty crazy behavior. I don't remember seeing anything like it on SVGs before. Definitely a rendering thing, not a code issue (so GSAP is not the culprit). We do recommend using GSAP 3 though  I'd consider reporting this to Chrome and giving them the specs of your computers.

[wcomp]

4 minutes ago, ZachSaucier said:

That's pretty crazy behavior. I don't remember seeing anything like it on SVGs before. Definitely a rendering thing, not a code issue (so GSAP is not the culprit). We do recommend using GSAP 3 though  I'd consider reporting this to Chrome and giving them the specs of your computers.

Ok. Thanks!

[PointC]

I've only seen weird stuff like that in Edge and using SVG masks. Just moving an ellipse x/y and having it clip is definitely odd. 

 

We've seen occasional strange things before with certain graphics cards. What card do the problem machines use and are the drivers up to date? My test machines are all using NVIDIA cards with no problems.

 

I wish I could help more, but I guess I'd second Zach's thought about reporting to Chrome.

 

Best of luck.

[wcomp]

1 hour ago, PointC said:

I've only seen weird stuff like that in Edge and using SVG masks. Just moving an ellipse x/y and having it clip is definitely odd. 

 

We've seen occasional strange things before with certain graphics cards. What card do the problem machines use and are the drivers up to date? My test machines are all using NVIDIA cards with no problems.

 

I wish I could help more, but I guess I'd second Zach's thought about reporting to Chrome.

 

Best of luck.

To my knowledge everything is up to date. I always install the updates as soon as they are available. Check out this link:

I took a video of the issue on my phone. Both computer are Dell Inspirion. The computer where the issue is not there is a custom build machine with a high end graphics card. So maybe it is the GPU. Is there any way to fix those kinds of issues in the code? Thanks.

Oh, and I pulled the codepen up on Android mobile and everything is working just fine. 

[GreenSock]

Yeah, definitely unrelated to GSAP. As for whether or not there's a code-based solution to this, I'm not sure because I can't replicate the issue either (so I don't know if any of the following would work) but here are some ideas for you to try...

1. Add a transparent object to each side of your animating element that ALSO animate in a way that'd keep the bounding box of the changed elements wider than your "real" element. Sometimes browsers only care about updating the "changed" area of the screen, but perhaps it's mis-calculating that in your case with the circle. So this tricks it into widening the area that needs to be re-rendered.
2. Change the <ellipse> or <circle> into a <path>. Maybe even make sure there's an anchor point on each side (I'm guessing maybe the browser is "chopping" based on the location of anchors rather than honoring the control points and curves they create)
3. Avoid using <svg> elements INSIDE other <svg> elements. Browsers seem to have a hard time with those, and some completely ignore transformations applied to the nested ones. 
4. Maybe add a slight rotation to the animation. It can be imperceptible, but maybe it'll trigger the browser to render it differently. 
5. Animate the color/fill of the element while tweening. Again, to FORCE the browser to render things. 

Hopefully at least one of those will help

[wcomp]

14 hours ago, GreenSock said:

Yeah, definitely unrelated to GSAP. As for whether or not there's a code-based solution to this, I'm not sure because I can't replicate the issue either (so I don't know if any of the following would work) but here are some ideas for you to try...

1. Add a transparent object to each side of your animating element that ALSO animate in a way that'd keep the bounding box of the changed elements wider than your "real" element. Sometimes browsers only care about updating the "changed" area of the screen, but perhaps it's mis-calculating that in your case with the circle. So this tricks it into widening the area that needs to be re-rendered.
2. Change the <ellipse> or <circle> into a <path>. Maybe even make sure there's an anchor point on each side (I'm guessing maybe the browser is "chopping" based on the location of anchors rather than honoring the control points and curves they create)
3. Avoid using <svg> elements INSIDE other <svg> elements. Browsers seem to have a hard time with those, and some completely ignore transformations applied to the nested ones. 
4. Maybe add a slight rotation to the animation. It can be imperceptible, but maybe it'll trigger the browser to render it differently. 
5. Animate the color/fill of the element while tweening. Again, to FORCE the browser to render things. 

Hopefully at least one of those will help

I tried your first suggestion and it solved the issue. Haha. Thanks.