gaiety/codestats-readme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #86 from edisonlee55/master

Browse source 
fix: fixed CSS scale() on WebKit causing rendering issues

So I have used the solution provided here (Reference):
CSS transform on SVG text element not working in Safari - Stack Overflow - https://stackoverflow.com/a/61398694/4333875

They have encountered issue with `transform: translate()` and filed a bug report, but `transform: scale()` is also having issue on our side.

Also, the minimum reproducible example is [here](https://stackoverflow.com/questions/62964270/css-scale-animation-in-svg-text-tag-not-working-on-safari) on Stack Overflow.
(the word `Test` won't show up **on Safari**)
This commit is contained in:
Anurag Hazra 2020-07-18 18:06:57 +05:30 • committed by GitHub
commit b039fa16af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/renderStatsCard.js
View file

@ -157,16 +157,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
})"> })">
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" /> <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" /> <circle class="rank-circle" cx="-10" cy="8" r="40" />
<text <g class="rank-text">
x="${rank.level.length === 1 ? "-4" : "0"}" <text
y="0" x="${rank.level.length === 1 ? "-4" : "0"}"
alignment-baseline="central" y="0"
dominant-baseline="central" alignment-baseline="central"
text-anchor="middle" dominant-baseline="central"
class="rank-text" text-anchor="middle"
> >
${rank.level} ${rank.level}
</text> </text>
</g>
</g>`; </g>`;
if (hide_title) { if (hide_title) {