box-shadow + transition glitchiness 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 box is glitchy when the transition changes the height of the content. Note that this only happens if it's the content box that changes height. If it's the container, the shadow works fine. However, I can't change the container's size since I want it to be dynamic to fits its contents.

Is there any workaround for this?

Answer 1

Best bet is to do the following. My guess is that because box-shadow is not applied to the element that's actually resizing that it can't resize with the contents. I'll need to do some more research, but this works:

Edit for Fixed Container:

Apply a transparent box-shadow to 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>

Answer 2

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