CODEWITHSUNDEEP
google-chromesvgscalingclip-pathhidpi
Smankusors
Smankusors

Reputation: 387

Chrome SVG clip-path behave incosistent across monitors

So I have a small HTML snippet below,

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <text y=16 clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</text>
</svg>

I expected the svg to be clipped as p does. Something like this below,

expected one

But moving this to my other monitor, which runs at 125% scaling, it changes,

125% scaling

Then I tried with the Macbook, which runs at 200% scaling, and the clip is gone 😨.

200% scaling

I found the alternative solution, which is by using Window.devicePixelRatio to correctly scale the clip-path (because the SVG is generated on the fly).

The problem is that this only happens on Chrome (and other Chromium-based). While on Firefox it's consistent across all monitors. So which browser is the correct behavior? Is this bug for Chrome? I can't find any existing questions about this on StackOverflow. 😅

Thanks,

edit: oh yeah I just found it's been on bug tracker since 2018 https://bugs.chromium.org/p/chromium/issues/detail?id=800784

Upvotes: 0

Views: 62

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101898

If you apply the clip-path to the SVG, rather than the <text>, it behaves as your expect.

<p style="clip-path: polygon(0 0, 100px 0, 100px 10px, 0 10px)">Lorem ipsum dolor sit amet</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" clip-path="polygon(0 0, 100px 0, 100px 10px, 0 10px)">
  <text y="16">Lorem ipsum dolor sit amet</text>
</svg>

Upvotes: 1

Related Questions