Box-shadow + transitional smoothing in IE10

Question

Jsfiddle

<div id="box"> <div id="body">Blah blah blah</div> </div> 

 #box { box-shadow: 0 0 8px black; } #body { height:100px; transition: height 0.8s ease; } #body:hover { height: 200px; } 

In IE10, the shadow at the bottom of the window glitches when the transition changes the height of the content. Note that this only happens if it is a content field that changes height. If it is a container, the shadow works fine. However, I cannot resize the container because I want it to be dynamic to fit its contents.

Is there any workaround for this?

Answer 1

The rendering problem has been fixed in IE11. No need to worry!

Answer 2

It is best to do the following. I assume that because box-shadow does not apply to an element that actually resizes, that it cannot resize the content. I need to do some more research, but this works:

Edit for fixed container:

Apply a transparent shadow for each child.

CSS

 <style type='text/css'> .box { box-shadow: 0 0 8px black; } .box .body { box-shadow: 0 0 8px transparent; } .body { height:100px; transition: height 0.8s ease; } .body:hover { height: 200px; } </style> 

HTML:

 <div class="box"> <div class="body">Blah blah blah</div> <div class="body">Blah blah blah 2</div> </div>