Search code examples
cssmicrosoft-edgestylingbox-shadow

Multiple Box shadows doesn't work in MSEdge

Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.

I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.

{
    width: auto;
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

Shadows should appear on the left-side as well in MSEdge.

Solution

  • The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.