css-transitions - box-shadow + 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;
}

IE10 では、トランジションによってコンテンツの高さが変わると、ボックスの下部にある影がグリッチになります。これは、高さを変更するのがコンテンツボックスである場合にのみ発生することに注意してください。コンテナの場合、シャドウは正常に機能します。ただし、コンテナの内容に合わせて動的にしたいので、コンテナのサイズを変更することはできません。

これに対する回避策はありますか?

Answer 1

最善の策は、次のことを行うことです。私の推測では、実際にサイズを変更している要素に box-shadow が適用されていないため、内容に合わせてサイズを変更することはできません。さらに調査を行う必要がありますが、これはうまくいきます：

固定コンテナの編集:

各子に透明なボックス シャドウを適用します。

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

レンダリングの問題は IE11 で修正されました。心配する必要はありません！