Take a look at this CSS code snippet:
div {
background: rgba(0,0,0,.05);
width: 200px;
height: 200px;
padding: 50px;
}
div > div {
background: rgba(0,0,0,.2);
width: 200px;
height: 200px;
border-radius: 5px;
padding: 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
}
div > div:hover {
border-radius: 5px 5px 0 0;
background: rgba(0,0,255,.2)
}
This is how it looks in HAML:
%div
%div
When you hover over the inner element, not only does the border radius change but also the background color and box shadow. This unexpected behavior seems to be happening only in Google Chrome, not in Firefox, IE or Edge. I'm using Chrome version 71.0.3578.98 on Windows 10.
EDIT
Notice the incorrect behavior in Chrome:
https://i.sstatic.net/otUFT.png https://i.sstatic.net/YSeuN.png
You can see that the shadow changes suddenly when hovering over the element.
EDIT 2
Here's the correct behavior in Firefox 64.0:
https://i.sstatic.net/fdCFC.png https://i.sstatic.net/tU2DW.png