I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera.
Surprisingly, the effect only seems to work in Opera when I remove the following properties:
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
However, upon doing so, it stops working in Firefox.
To demonstrate, I've created a JSFiddle here:
https://jsfiddle.net/ta4sju8n/20/
Interestingly, it appears to be functioning correctly there...
The HTML markup is as follows:
<ul>
<li><a href="#">Hover me</a></li>
<li><a href="#">Hover me</a></li>
<li><a href="#">Hover me</a></li>
</ul>
SCSS styling for the hover effect:
body {
background-color: black;
color: white;
}
ul {
list-style: none;
li {
padding: 10px;
a {
display: inline-block;
vertical-align: middle;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
position: relative;
overflow: hidden;
color: white;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
text-decoration: none;
/* Animation for border bottom */
&:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: white;
height: 1px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
&:hover:after {
right: 0;
}
}
}
}
If anyone has insights on how to tackle this issue, your help would be greatly appreciated!