IEにおけるlinear-gradientとborder-radius
IE10および11において、どうしてそうなってるのかさっぱりわからないままですが、ひとつの要素に対してbackground:linear-gradientとborder-radiusの両方を適用すると、なぜかグラデーションが吹っ飛ぶ事象が。
ちなみに、ひとつずつ適用させるとちゃんと表示される。つまり文法ミスとかではない。
いろいろ試した結果、linear-gradientで使用したbackground-sizeが小さすぎるためっぽいと判明。
background-image: linear-gradient(90deg, #0F6CAE, #0F6CAE 50%, #277AB6 50%, #277AB6); background-size: 2px 2px; border-radius: 5px;
はアウトですが、
background-image: linear-gradient(90deg, #0F6CAE, #0F6CAE 50%, #277AB6 50%, #277AB6); background-size: 3px 3px; border-radius: 5px;
はセーフでした。
これ、色の分割がもっと増えた時はどうなるのかとか疑問ですが、とりあえずよくわからないが対応できたのでメモ。