CSS, Safari: Target only Safari browser

style.css

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .flex-direction-nav-featured a{
        margin-top: 4%;
    } 

    /* Safari only override */
    ::i-block-chrome,.flex-direction-nav-featured a{
        margin-top: 5%;
    } 
}

@ntnbst Works like a charm. Thanks for shared this.

@ntnbst
OMG , i don't really understand it works but thank you very much !!!! (if you have some explanations, i'm ready ^^)

works fine on Chrome and Firefox but not on Safari (iOS or MacOS). I am getting a “zero sized error” on Safari. I recently had an expired cert but renewed it using Let’s Encrypt. I did not test on Safari after renewal as it worked fine on Chrome.
created wordpress website can solve this problem.
Thanks in advance!

It's work without SASS process
The hack applies on Firefox Standard (why ? Don't know)
I think some of User Agent specs are the same between Firefox and Safari MacOs

@ntnbst thanks man

So can i just plug this in and it will work?

So can i just plug this in and it will work?

yes, it's work for me so just check the Developer tools on Firefox so the hack appear on sometimes :)

FYI:
@ntnbst's approach works great for desktop browsers, but it will target every mobile browser on iOS devices. :)

@ntnbst's approach did not work for me on Safari desktop. It didn't affect any browser. If I remove the "not all", it seems to affect all browsers.

@Valeka - many thanks! your solution worked for me.

@supports (-webkit-hyphens: none) {
    @content;
  }

Works fine for me & without errors from linter(s)

@MakerTim Thank you so much!!! You made my day!!

@MakerTim Thank you very much, good sir!!!

MakerTim 🎉

Safari is a mess. Thank you! Added to my globals...

.media-safari(@rules) {
  @supports (-webkit-hyphens: none) {
    @rules();
  }
}

@import (reference) "../less/index.less";

display: grid;

.media-safari ({
    display: flex;
});

@MakerTim Thank you very much!