Mobile buttons showing PNG border when pressed

Hello.

When viewing this test site on mobile, the 3 button on the front page when clicked show the PNG outline very slightly. It doesn’t show this on preview mode when editing, but only on the live site.

Any ideas?

Many thanks

https://noughty90s.webflow.io

https://preview.webflow.com/preview/noughty90s?utm_medium=preview_link&utm_source=designer&utm_content=noughty90s&preview=ad5abe3376b90083bae96a46d4eae065&mode=preview

This flash is for accessibility, usability. It gives a visual feedback when a link is tapped.

Use custom code at site level to remove the flash. You must know that removing this flash isn’t viewed as a good practice as it can degrades usability. So use with care.

<style>
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
</style>

If you run into issue, try this one instead:

<style>
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
</style>
1 Like

Thanks for the reply! If it gets rid of the outline and it still works as intended, we’re still fine with that. Where exactly does this code go @vincent?

If you want it to be active on one page: at page level in the page settings in the HEAD area.

If you want it to be active on the whole site: same area but in the Site’s settings in the embed tab.