Skip to content

Commit

Permalink
Merge pull request anuraghazra#86 from edisonlee55/master
Browse files Browse the repository at this point in the history
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**)
  • Loading branch information
anuraghazra authored Jul 18, 2020
2 parents 431f2a0 + 61442cb commit b039fa1
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions src/renderStatsCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,16 +157,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
})">
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" />
<text
x="${rank.level.length === 1 ? "-4" : "0"}"
y="0"
alignment-baseline="central"
dominant-baseline="central"
text-anchor="middle"
class="rank-text"
>
${rank.level}
</text>
<g class="rank-text">
<text
x="${rank.level.length === 1 ? "-4" : "0"}"
y="0"
alignment-baseline="central"
dominant-baseline="central"
text-anchor="middle"
>
${rank.level}
</text>
</g>
</g>`;

if (hide_title) {
Expand Down

0 comments on commit b039fa1

Please sign in to comment.