I'm currently developing a Vue application and I have a logo in the navbar that, when clicked, should redirect users to the home page. The logo is an .svg file representing the site's name which consists of two lines. For example, if the website is called HelloWorld.com, the logo might look something like this:
hello
world.com
In Safari, the Live Text feature displays and adds a layer on top of the logo which can unintentionally direct users to world.com instead of the intended action. This affects the user experience negatively.
Is there a way to disable this behavior using Vue, HTML, or CSS?
I've already tried adding the following attributes to my img tag:
<img
@click="goToHome()"
class="img-logo-navbar"
src="/imgs/logo-RCN-black.svg"
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; -webkit-touch-callout: none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;"
/>