Hi guys I have this “munu” menu for mobile windows and I encountered this cropped SVGs on my published site when viewed on iPhone safari:
It didn’t happen in desktop and tablet view and I couldn’t find out the reason why, since the “menu icon” and “icon” class didn’t really change.
This is my published site.
This is my read-only site.
Thank you so much.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Your issue likely stems from Safari’s handling of SVG rendering, where elements may get clipped due to overflow settings or improper viewBox values. To fix this, ensure your SVGs have a properly defined viewBox (viewBox="0 0 width height") and explicitly set width and height in CSS (width: 100px; height: auto;). Additionally, try adding overflow: visible; to the .icon and .menu-icon classes to prevent cropping. If the issue persists, wrapping the SVG in a div with position: relative; or using an inline SVG instead of an <img> tag can help Safari render it correctly.
Thank you so much @cloudcoder! Apologies for the late reply.
I went through your suggestion one by one and there’s one thing I was a bit confused about—Could you elaborate more on the difference between an inline SVG versus the img tag?
Would this still count as a SVG with the img tag?
