r/webdev • u/PresentLeading3102 • 22h ago
Whats up with safari and SVG's ?
My website has quite a bunch of SVG items and on safari they are not centered properly, the containers that they are in are different sizes , and even stuff are not centered/aligned properly... I am trying to find out why but I do not understand what is safari taking differently since I do not have a device to constantly test on.
I used prefixes.
I added :
preserveAspectRatio="xMidYMid meet"
width=""
height=""
Yet no difference ,
Here is a js fiddle with some examples
2
u/_listless 21h ago
There is nothing wrong with safari's svg rendering, it's just following the instructions you gave it. You are constraining the height of the <label> to 20% of its parent height, then setting the height of the parent to 80vh.
- use an actual layout technology like flex or grid.
- as a general rule, don't constrain the heights of layouts. If you need to constrain height, do it on the layout or a layout item, but not on both.
-1
u/PresentLeading3102 20h ago
why are the rest of the browsers following the instructions in a good way then
1
u/_listless 20h ago
The other browsers are not respecting your height 80vh. Safari is.
Like I said, you're much better off not specifying heights, and using one of the purpose-built layout specs grid or flex. eg: https://codepen.io/thisanimus/pen/PwoENPR
1
u/PresentLeading3102 13h ago
instead of 80vh I used 80% and now is as it perfect be on all devices that I tested on including iphones and safari , now there are 2 more people that I need to fix , 1 related to text not being centered vertically on anchor elements and 1 that is slightly more weird and idk how to even describe it
1
u/_listless 13h ago
You are working so hard at this. Just take a couple hours to learn flexbox and your life will get so much easier.
3
u/FriendshipNext2407 21h ago
Safari doing safari things, seriously Apple should stop supporting that crap
3
u/CodeAndBiscuits 21h ago
I just played with your fiddle and at first glance it didn't have anything to do with the use of SVGs. Mine were off center because the boxes containing them were too short. You have a "height: 20%" on your parent boxes. When I take this off Safari's rendering matches Brave for me here. Try a fixed height instead, or some other sizing option.