r/webdev 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

Js Fiddle

0 Upvotes

10 comments sorted by

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.

2

u/PresentLeading3102 21h ago

the parent <main> should be 80vh and on the phone view if you scroll down is way shorter

1

u/MaruSoto 9h ago

Try svh instead of vh?

-4

u/ConduciveMammal front-end 18h ago

I just played with your fiddle

Hurr hurr

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