Safari Browser Detection to Change CSS Behavior - Display Flex/Block

[AmDaMan]

I'm not very good with coding or CSS so I need some help. What i'm trying to do I feel should be simple but it's seemingly not for me. I got some code knocked up (CGPT) and it was working fine until the latest version of Safari came out v16.5.

What I want to do is;

When a Safari Browser is detected to change the CSS style to 'display: block' for an object on my webpage. The reason for this is because the 'flex' condition simply doesn't work properly on Safari that I've read (and seen).

I want it to remain as 'flex' for all other browsers. The behaviour can be observed here after a search is executed on Safari (everything is squashed up after a search);

www.bestcarhire.com/test/

The code is this;

/* Styles for the 'webtest' ID in non-Opera and non-Safari browsers */
#webtest {
  display: flex;
  justify-content: center;
  /* Additional styles */
}

/* Exclude display: flex; for Opera and Safari */
@media not all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm),
       not all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #webtest {
    display: block;
    /* Additional styles for Opera and Safari */
  }
}

If someone has any ideas or alternatives let me know. I tried a few Java / PHP alternatives too but no luck. It behaves as though it's not detected Safari and runs in flex.

Cheers

 

[Dup]

Flex has been fully supported by Safari for a long time (https://caniuse.com/?search=flex)

#webtest is not the issue. When the page loads and is squashed, if I interact with #webdev's immediate child in the dev tools, the layout shifts to what you expect. I suspect there's some JS loading that's out of time in Sarafi, or at least this version, but my devtools interaction triggers the re-render it needs.

 

[AmDaMan]

Thanks for that!

So do the search results load normally on your Safari version> I've got quite a few people saying it loads fine but on my (old) Macbook air on Safari v16.5 it doesn't work right at all.

 

[Dup]

This is what happens in Safari Tech Preview (Release 170):

You see the flash of smaller width then it adjusts itself.

This is what happens in regular 16.5:

It's inconsistent if it hangs on the thin layout or not. Triggering a repaint by changing a css prop in the dev tools seems to sort it, however I'm not exactly sure why. Could be a JS timing thing but I don't have time to delve deeper into it except for....

This url doesn't look right and is failing. It may be this script load failing is not failing gracefully in one version of Safari and blocking some code. Doubt it, but best to deal with the obvious issues first.

 

[AmDaMan]

That's weird, it must be timing and I expect my old slow mac book can't recover whatever its trying to do in time. It behaves like your second video each time.

Not too sure what the code error is, that must be something their end. I'll ask them.

So do we expect that in the next release (170) it will behave the way it should?

Cheers