CSS - Internet Explorer won't show box-shadow & transition

98 Views Asked by Tyrone Norris At 19 April 2020 at 15:18

I'm attempting to highlight a div using transition & box-shadow.

  transition: transform .8s ease-in;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);

I get it to function in Chrome but not IE. What do you suggest?

--- Update May 1st, 2020 ---

I narrowed down my problem. If I change the display to block or table it works but by default the element is a table-row. When I change the display it works but throws off my styling. Any particular clue what the difference between "table" and "table-row" displays?

Original Q&A

There are 2 best solutions below

NanoNano On 19 April 2020 at 15:52

try to use this following code :

transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
-webkit-transition: transform .8s ease-in;
-webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);

Deepak-MSFT On 20 April 2020 at 02:56

If you remove the transform from the line below then it will work in IE 11 browser.

 transition: transform .8s ease-in;

Test code:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition:.8s ease-in;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

 <div>Test</div><br>

 <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Output in IE 11 browser.

If the issue persists then please try to inform us which version of the IE browser you are using for making this test? What is the purpose of using transform with transition? What exact output do you want to get in the IE browser? If possible then try to provide the sample code with HTML and CSS that we can try to run and test with the IE and other browsers to see the difference in the results.

CSS - Internet Explorer won't show box-shadow & transition

There are 2 best solutions below

Related Questions in CSS

Related Questions in INTERNET-EXPLORER

Related Questions in TRANSFORM

Related Questions in TRANSITION

Related Questions in BOX-SHADOW

Trending Questions

Popular # Hahtags

Popular Questions