Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Safari 15.0 SVG sizing is off (also affecting https://lottiefiles.com)
See original GitHub issueHi,
I noticed today that Safari 15.0 seems to be ignoring the fixed pixel attribute width= and height= in the SVG within the lotty player, and only using the percentage from the inline style which yield unexpected sizes.
How it looks in Safari 15.0:
)
This is how it looks normally (in Chrome, or Firefox):
I’ve been trying to find out what changed in Safari to cause this, but haven’t found many resources.
Thanks, Jorge L
Issue Analytics
- State:
- Created 2 years ago
- Comments:15 (7 by maintainers)
Top Results From Across the Web
SVG viewbox height issue on ios Safari - Stack Overflow
The problem is that you are only setting width, not height of the SVG layout box. The viewBox is then being fit inside...
Read more >Here's How I Solved a Weird Bug Using Tried and True ...
I recently fixed an interesting bug that was affecting some SVGs in Safari browsers with no obvious pattern or reason.
Read more >stroke-width - SVG: Scalable Vector Graphics - MDN Web Docs
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.
Read more >Attempting to fix responsive SVGs in desktop Safari (and some ...
The only viable option seemed to be to dynamically set the width/height of the SVG in pixels as the page was resized (it's...
Read more >Using SVG with Media Queries - SitePoint
By using SVGs with media queries, we can change their appearance based on user interaction or viewport size, and use them in multiple ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Upon further investigation, I noticed that this only happens if the parent container doesn’t have an explicit width. I was able to fix my issue by setting a fixed size to my flexbox column. Thanks!
No problem at all. However, leaving the issue open for a while to see if other people report related breaking changes.