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

 

[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.

 

[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