Safari + Round Corners + Transition = weird glitch

[aceon (JD)]

Hey guys,

So I did some looking around on the forums to try and solve my problem and I found a solution but for some reason it only works on some of the buttons.
Here is the finished site. If you open it in chrome you can see the button hover interaction works fine. If you open it in Safari, the sliding portion is glitched, but only on the top buttons. The Kickstarter button at the bottom of the page acts fine.

I added this to the custom code as it was the solution for others but I’m not sure if it is implemented correctly:

<script>
SlideButton.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0) 
</script>

Any help is appreciated!

---

Here is my site Read-Only: Webflow - OhSnapOfficial

[vincent (Vincent Bidaux)]

You can try to make it happen inside of Webflow, you don’t necessarily need a script as webflow supports backface visibility and translate.

Here is how you can try to set it up on your element. Select your element and:

https://d1ro8r1rbfn3jf.cloudfront.net/ms_60059/Yhh4AMJXpoPb9nitx8ItZtIB7Oe9A6/cbqnf.jpg?Expires=1569866400&Signature=fK5on121ESKXa~dKzgstPpHDwL4h1-AjZqeTLmFbFcul4P3ESqhMN71XhHAT~~~dbgFJWGNjhSjVDfPYOUdyZXWvSSa5ocCuvCbgMOw8OgZ28J7njEBtYHvYFjDIUAcEhC4xsm-UevvnTRmQT~-OI2R3QGwNlhyrR3yUoSo0VQgiQejayWNfuYN7NrK~ehiZ9oJhBFR1Mu-RyBAM7bDevyNvJJypbMsGRlS8pg3P01OhV7uc~wyYXzvAfSrGkvISEGS62qySzPzMgJJsby1Rh3dmAOpJecBd6mb0a~PTyvEp-WTA~rhqulLdy4uKttPR~PJxAa6LmhqbgJbS7nshDg__&Key-Pair-Id=APKAJBCGYQYURKHBGCOA

Also, for the translate:

https://d1ro8r1rbfn3jf.cloudfront.net/ms_60059/SG4xx90YUmn2aM4X1QA5PF917PloPR/p4gms.jpg?Expires=1569866400&Signature=sOU4IBXZEJnL4UW9gURXLZXmNYID8YtVhJ6vXDcWdW~u8g~ci8qhohDUvDaFi6pOQzvTw9AfoJriFFpip7FPSADkMh55Q2CYTo0AxhLOvPNZRVv-Ce4f1uxZNji~uYs6sNId1kELVPmA21cAWuOgGaxgufPqeQ6zM4QaBTnKcUk~-XiQe6BBTPpxQPdzsvqYBkLN4gHkMVAXdTcCR4dqj2XXfHLq-IXtZ6ICTTYcoDqLB2GjKBbqqUsDLDrv-HvGFiDa4TgMW7q0GyPpWGkX48puyrju~cWPam1A4BxdMfpex3KnSgXtkOHIGeuIhQt79HcNErMW6D-ZELus2Qb-Hw__&Key-Pair-Id=APKAJBCGYQYURKHBGCOA

Ad a Move 0 0 0. Notice the previous button turned blue because there’s a backface visibility hidden set up on it.

I don’t know if it’s going to fix your problem, but that’s doing exactly what your code is supposed to do.

BTW your script isn’t a Javascript script and can work. It’s a CSS stylesheet and should be like this:

<style>
.class of your element {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0) 
</style>

(or maybe it’s a script, I’m very bad at scripts. But I think it’s not)

[aceon (JD)]

Thanks for your help Vincent but your pictures are showing a broken link for me! However, I tried changing the script to what you suggested. and it did nothing

[aceon (JD)]

bump. Still can’t seem to figure it out.