Old Safari and absolute positionning

Hi all,

I had a message from a customer using MacOS 10.13.6 and Safari 13.1.2, with a screenshot of his website, which looks totally messed-up because of absolute positioning not working.
(I use absolute positioning for my background images to benefit from srcset.)

I was aware of some flex gap issues or other small problems, but this one…
The closest official issue I could find is the lack of support of absolute positioning of flex items but it seems that Safari 13 is OK with that:

Does anyone have solid information about this or even a solution or a workaround?

(I know the browser usage statistics are on my side, and I advised my client to use another browser, but still, it hurts me that all my sites look horrible on old Safari…)

@yankiara I wouldn’t worry much about that. I would tell them to update their OS and then update their browser. They are 4 versions behind and Apple discontinued support for 10 (High Sierra) making it a security risk. Sure its a free update.

2 Likes

I 100% agree with @hopscotch.
Taking care for more than 2 years of browser/OS compatibility/support isn’t necessary at all imo.
At least for sites that are visited by regular users and not created specifically as/for business/enterprise solutions.

2 Likes

Hi @hopscotch and @Marius,
Thanks for your answers.

I totally agree with you in this case, and I told my client so, for there’s indeed a big gap.

What about clamp() or aspect-ratio, which I use a lot, and which are related to more recent updates?
Or :has()?

I always wonder where is the limit with all this and polyfills/failsafes…

I personally wait for browser compatibility for 18-24 months and consider things as safe then, dependent on the case.

For example:

This has been implemented by all major browsers by Jan '24.
As this is a very important property, which will break entire sites if the browser isn’t compatible, I’d wait rather 24 than 18 months.
Probably start building sites with it from fall '25.

All major browsers should be considered, including their mobile versions:

  • Chrome, Edge, Opera
  • Firefox
  • Safari
1 Like