How To Fix This Glitch On Safari Browser

Hello,

Was wondering if there was a way to fix this glitch on Safari with CSS; when you hover over the surface design tab it moves slightly , I fixed this on Chrome with this CSS,

header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 35.5px !important;
}

but it only works on Chrome....

The glitch is slight and might not be noticeable for most people, but it bothers me and I can't seem to find a working CSS.

Thanks!

Here's my website

https://www.erinncapko.com/

Hey there! I think the issue is that you're using fractional pixels ie "35.5px".

To my knowledge, Safari doesn't respect fractional pixels. Try rounding to a whole pixel value and let me know how it goes!

best,
Logan

On 1/4/2024 at 4:43 PM, BartelsCreativeCo said:

Hey there! I think the issue is that you're using fractional pixels ie "35.5px".

To my knowledge, Safari doesn't respect fractional pixels. Try rounding to a whole pixel value and let me know how it goes!

best,
Logan

Hey,

Thanks for replying,

I have tried this and sadly when I do this, then the CSS doesn't work in Chrome, even when I "duplicate " the CSS (should of mentioned this). just can't have the best of both worlds with this CSS haha. 

3 hours ago, ec25 said:

I have tried this and sadly when I do this, then the CSS doesn't work in Chrome, even when I "duplicate " the CSS (should of mentioned this).

That's a bummer to hear! 

I'm curious though. When you said you duplicated the CSS, do you mean you had one set of css properties set to target just the safari browser using special webkit properties? For instance like this?

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 36px ;
}

}}

Alternatively you could try this approach using round pixels too. 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /* Safari only override */
    ::i-block-chrome,.header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 36px ;
}
}

Let me know if this is helpful!

There is likely some js out there that can help, but that's beyond my expertise.