📜 ⬆️ ⬇️

Bug with box-shadow in Opera

I found an unpleasant bug in Opera related to the interpretation of the box-shadow property. If this property is assigned to an element with a pseudo-class: hover, when you hover the cursor, the shadow around it is displayed incorrectly. Search for a solution on the network did not bring results and had to be found experimentally.

It was found that the problem is solved by assigning a similar shadow to the original element with the same dimensions as for element: hover. In my case, this shadow would be superfluous and I just made it transparent.

image
')
The described problem was fixed in versions 10.54 and 10.60 for Mac OS. The above is illustrated as when you hover the cursor Opera displays blocks with the following properties:

/* */
div.first:hover {
box-shadow: 0 2px 10px #5f5
}
/* */
div.second {
box-shadow: 0 2px 10px rgba(0,0,0,0)
}
div.second:hover {
box-shadow: 0 2px 10px #5f5
}


I hope someone this little hint can be useful. Or maybe even the browser developers, after reading this topic, will fix this petty annoying misunderstanding.

Source: https://habr.com/ru/post/97289/


All Articles