Weird Button Hover Effect on Safari

[GoViralLab_2021]

Hi there geng! Greetings and Good Morning!

I’ve tested other browser like Chrome and so on… and even Microsoft Edge… the button hover effect looks fine to me but it come to weird hover effect ONLY on Safari version Version 13.1.2 (15609.3.5.1.3). I attached the picture here for you to see. It become like a weird squarish… errk…

Its on my client website : mathperteducation.com

.

Hope you can help!

Sincerely
Ady

[ruenel]

Hello Ady,

Thanks for writing in! This seems to be a browser issue. The Safari browsing does not render the overflow:hidden properly which is why the square area is visible instead of being contained in the rounded borders of the button area. I’ve submitted this to our issue tracker so the developers will be made aware of it.

Please beard with us.

[GoViralLab_2021]

Hey there Ruenel,

Cool. For now i change to a simple button to be a safe side. Hope the developers will rectify this tiny minnie error.

[ruenel]

Thank you for your understanding @platinumcode2013.

[alexander]

Hi @platinumcode2013,

We’ve taken a closer look at this and I wanted to followup here to get you a solution as quickly as possible. Can you try adding this to your Button’s Element CSS?

$el.x-anchor {
  position: relative;
  z-index: 1;
}

That should correct your display issue in Safari. We’ve not settled on an official solution yet since that element is somewhat nuanced and we want to make sure the solution works in all kinds of different combinations, but you should be fine to use this on your site until we get it fixed in a future update.

[kory]

Howdy, @platinumcode2013!

Thanks for writing in! After looking into this some more, I just wanted to let you know that we’ve moved forward with a bugfix for that that we believe should address the underlying issue, while avoiding any side-effects. The previous solution mentioned does indeed help to wrangle in the overflow of the particles on the Anchor Element; however, it can also create some potential stacking context errors if Elements are overlapping one another. For example, if we had something like this:

Which is three elements laid out sequentially (Button → Alert → Button) and some negative margin on the Buttons to overlap the Alert, using the fix above would result in the following:

Since we don’t want to unnecessarily alter the stacking order if we can, I’ve gone with the following fix that seems to create a new rendering context that respects the overflow: hidden declaration, without altering the stacking context.

Effectively, we just added transform: translate3d(0, 0, 0); to a new bit of markup coming out for the Anchor Partial in our next release due to some other changes. I’m unable to test this completely at the moment as my local install has differing markup from what is in the current version, but you could try adding transform: translate3d(0, 0, 0); to .x-anchor to see if it helps. If not, you can continue using the fix above as mentioned.

With the next release of the theme, all of this should be taken care of natively and patched up in Safari. Cheers!

[GoViralLab_2021]

Greetings Kory, Alexander and Ruenel,

Thank you so much for a intensive help and great solution. I didnt have tome yet to test it on my side for my client mathperteducation.com

I will try soon this week and will response here again with positive or negative result. Dont worry guys… Lets share and make the X Pro the best theme build in the world!

[ruenel]

You are most welcome @platinumcode2013!