Weird SVG display issues in Firefox about donutty HOT 5 CLOSED

Thanks so much for this!
I'll look in to it.

from donutty.

@shanomurphy I have pushed an update which seems to resolve some weirdness in teh Codepen Demo, but I couldn't recreate it in the clean test.html file.

I wonder if you can create a JSFIDDLE or something which demonstrates your problem?
Additionally, are you using any viewport scaling? or browser zooming?

Thanks.

from donutty.

Hi, No, no viewport scaling or zoom. I've made a reduced test case:

https://jsfiddle.net/34bpcsex/

Upon further testing though I can confirm it's related to the rotate angle.

Any rotate angle that causes the svg box sides to be not parallel with the viewport causes the funkiness.

So the rotate angle of 93.333… causes problems:

But an angle of 90deg works perfectly fine:

I'm guessing the 93.333… is to try and offset the rounded ends?

Also can confirm I only noticed the issue when I was forced to use a very old device (2010 iMac). I've since tested on my usual computer using Firefox 91 and there are no apparent issues. So maybe it's hardware related somehow?

from donutty.

Ok so looks like this old device has issues with rotated SVGs in Firefox (I just tested rotating various SVGs). So this doesn't look to be a code issue here. Thanks for your help!

from donutty.

Wow, your first screenshot looks like a rasterization render-engine issue... I run in to those a lot, on firefox, when doing filters, blend-mode and transforms as the browser attempts to render objects in to a new raster layer. That would account for why a non-rotated, or 90d rotated, doesn't show up as it doesn't have to place in a off-grid paint frame? not sure.. And the 2010 mac may have a very old graphics card with poor compatibility?

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
^^ here's some *cough "light reading" if you're interested :)

Yikes, but thanks for the diligent investigation!

from donutty.