caleb
LightNews LightNews
banner
caleb.jasik.xyz
caleb
@caleb.jasik.xyz
580 followers 1.6K following 870 posts
drawing pretty rectangles 🟪 @defined.net

css

he/he/hrmm
Posts Replies Media Videos
caleb.jasik.xyz
Anyone know of a good way to avoid Safari from butchering my SVG's when rendered via ``?

Rendering inline is fine, and `` works beautifully in Safari, but ends up with a white background in Firefox, as it's really meant to be akin to an iframe.

I've resorted to detecting #safari 😬.
The same SVG rendered twice, grainy and blurry on top when rendered via an img tag, crisp and fantastic when rendered inline /* Hide .safari-only on non-Safari browsers */ @supports (not (hanging-punctuation: first)) or (not (font: -apple-system-body)) or (not (-webkit-appearance: none)) { .safari-only { display: none; } } /* Hide .not-safari-only on Safari browsers */ @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { .not-safari-only { display: none; } }
December 17, 2025 at 7:13 PM