SVG circles renders wrong on WebKit

[travisdowns]

Per HN:

Sadly not related to the content itself, but WebKit browsers seem to misrender your indicator circles in the third graph :(
Desktop and mobile Safari both do it. Firefox shows the circles in a reasonable place.

[saagarjha]

Here's how it looks like in Safari:

I assume Firefox is doing it right:

[travisdowns]

@saagarjha thanks so much! Yes, Firefox has it right (not surprisingly, as that's what I tried it on :)).

Should have a fix shortly.

[travisdowns]

Same problem in GNOME web, great:

I kind of knew I'd regret hand-coding this SVG overlay...

[travisdowns]

Yes, the issue is that WebKit doesn't seem to honor the center transform style .svg-center-xfrm.

<style>
.svg-center-xfrm * {
  transform-box: fill-box;
  transform-origin: center;
}
</style>

<div class="img-overlay-wrap">
  <img class="figimg" src="{{assetpath}}/fig7a.svg" alt="Figure 7a Annotated">
  <svg viewBox="0 0 90 60">
    <g class="svg-center-xfrm" stroke-width=".5" fill="none" opacity="0.5">
      <ellipse transform="rotate(-25)" cx="34" cy="10" rx="12" ry="5" stroke="green" />
      <ellipse transform="rotate(-25)" cx="34" cy="34.5" rx="12" ry="5" stroke="red" />
    </g>
  </svg>
</div>

svg-center-xfrm wasn't taking effect on the two ellipses. Even if I set it directly on the elipses, no luck. Perhaps SVG elements can't be styled that web in webkit or it's specific to transform-box, etc.

[travisdowns]

@saagarjha - should be working now, give it a shot if you can!

https://travisdowns.github.io/blog/2020/05/18/icelake-zero-opt.html?foo=jsdjl

Note the foo=kljsdj to break the caching GH pages does.

[travisdowns]

Should be fixed in d15ab71.

[saagarjha]

Yes, it looks fixed to me too. Thanks!

[travisdowns]

Great, credited in the next push:

LMK if for some reason you wish to remain anonymous.