JSFiddle - React, Tailwind, and code Playground

by duvrai

HTML

<h1>Random stuff not working in WebKit SVG</h1>
<h2>Translate in CSS</h2>

<svg viewBox="0 -20 100 24" width="100" height="24" class="gCSSpx">
  <g>
    <text>&lt;g&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textCSSpx">
  <g>
    <text>&lt;text&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="gCSSperc">
  <g>
    <text>&lt;g&gt; %</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textCSSperc fail">
  <g>
    <text>&lt;text&gt; %</text>
  </g>
</svg>


<h2>Translate in CSS after page load</h2>
<button>translate</button>
<svg viewBox="0 -20 100 24" width="100" height="24" class="gJSpx">
  <g>
    <text>&lt;g&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textJSpx fail">
  <g>
    <text>&lt;text&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="gJSperc">
  <g>
    <text>&lt;g&gt; %</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textJSperc fail">
  <g>
    <text>&lt;text&gt; %</text>
  </g>
</svg>

<h2>Translate with Web Animation API</h2>
<svg viewBox="0 -20 100 24" width="100" height="24" class="gAnimatePx">
  <g>
    <text>&lt;g&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textAnimatePx fail somewhat">
  <g>
    <text>&lt;text&gt; px</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="gAnimatePerc">
  <g>
    <text>&lt;g&gt; %</text>
  </g>
</svg>

<svg viewBox="0 -20 100 24" width="100" height="24" class="textAnimatePerc fail">
  <g>
    <text>&lt;text&gt; %</text>
  </g>
</svg>

<div class="fail">
  <p>red means fail in WebKit browsers. The ones I tried:</p>
  <ul>
    <li>MacOS Safari 14.0 (15610.1.28.1.9, 15610)</li>
    <li>GNOME Web 3.38.2 (WebKitGTK 2.30.4)</li>
    <li>iOS 14.2 Safari</li>
  </ul>
</div>
<div  class="fail somewhat">
  <p>orange fails only on the...

CSS

svg {display: block;}
.gCSSpx g {transform: translateX(20px);}
.textCSSpx text {transform: translateX(20px);}
.gCSSperc g {transform: translateX(20%);}
.textCSSperc text {transform: translateX(20%);}

.fail {
  border: 1px solid red;
  border-radius: 4px;
}

.fail.somewhat {
  border-color: orange;
}
div.fail {
  margin: 1em 0;
  padding: 1em;
}

JavaScript

const animatePx = [
                {transform: 'translateX(-20px)'},
                {transform: 'translateX(+20px)'},
              ]
const animatePerc = [
                {transform: 'translateX(-20%)'},
                {transform: 'translateX(20%)'},
              ]

const animateOptions = {
                duration: 1000,
                direction: 'alternate',
                iterations: Infinity
              }
document.querySelector('.gAnimatePx g').animate(animatePx,animateOptions);
document.querySelector('.textAnimatePx text').animate(animatePx,animateOptions);
document.querySelector('.gAnimatePerc g').animate(animatePerc,animateOptions);
document.querySelector('.textAnimatePerc text').animate(animatePerc,animateOptions);
document.querySelector('button').onclick = function() {
  document.querySelector('.gJSpx').classList.add('gCSSpx');
  document.querySelector('.textJSpx').classList.add('textCSSpx');
  document.querySelector('.gJSperc').classList.add('gCSSperc');
  document.querySelector('.textJSperc').classList.add('textCSSperc');
}