InternetExplorer11における描画の最小の大きさについて

Question

画像の上に細かなドットをかぶせるために、以下のようなHTML、CSSを記述しました。

<div class="img-box">
  <div class="bg-dot"></div>
  <div class="img-provisional"></div>
</div>

.img-box {
  position: relative;
  width: 500px;
  height: 250px;
}

.img-provisional {
  width :100%;
  height :100%;
  background-color: #999;
}

.bg-dot{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 3px 3px;
  background-image: radial-gradient(#fff 30%, transparent 30%);
}

上記をInternetExplorer11（以下IE11と表記）で表示した際に、ドットが表示されない状態となっております。「bg-dot」のbackground-sizeを「5px 5px」以上にすると表示されます。

IE11では、描画できる最小サイズが他のブラウザよりも大きい、というようなことはあるのでしょうか。

WEB検索したのですが、めぼしい情報が見つからず、ご教示いただきたく存じます。

Answer 1

IE11では、描画できる最小サイズが他のブラウザよりも大きい、というようなことはあるのでしょうか。

おそらくそのようなことはなくて、サブピクセル単位（1px未満の領域）の描画になった場合の画像処理（色の補完など）が他のブラウザと異なっている結果であると思います。
実際、質問文のhtmlをIE11で表示させ、拡大率を150%くらいにするとドットが表示されるようになります。
また、cssのtransparent部分を大きくすると(50%くらいまで上げる）IE11でも等倍でドットが見えるようになります。
ただ、chomeやfirefox等他のメジャーブラウザと同じ表示にはならないですね。それは仕方ない。

また、グラデーションの位置指定をパーセンテージからpx単位に変更するとsizeの変更をしなくてもパターンが表示されます。整数の演算になるので計算が単純になるからでしょうか。

.bg-dot{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 3px 3px;
  background-image: radial-gradient(#fff 1px, transparent 1px);
}

Comments

[matahiro]

ご回答いただき、ありがとうございます。
ご指摘いただいたサブピクセルについて自分でも調べてみたところ、確かに何かありそうな感じでした。
以下のページの内容より、上記のコードでドットの白丸の大きさが1pxを超えるのがbackground-sizeを5px以上にするか、radial-gradientの境界を50％以上にした時なので、恐らく1pxに満たない場合は切り捨ての処理が行われるか何かで、IEでは処理されないのかと思いました。
https://cotodama.co/css_radial-gradient/

ただ、borderを0.5px、スタイルをdottedで指定すると、IEでもドットが表示されます。
プロパティによって、1pxに満たない場合の表示が異なるみたいです。。。IEややこしや。。。

Answer 2

IE11では、描画できる最小サイズが他のブラウザよりも大きい、というようなことはあるのでしょうか。

大いにあります。
他、IE11には、バグやセキュリティホールなど、公式がもう排除したいと思うくらいの不都合が大量にあります。

どうしても、対応が必要ならば、
IE11のみに適用させる、CSSハックと呼ばれるもの（CSSの解釈バグを利用した、特定ブラウザにのみスタイルを当てる手法）が存在しますので、
そちらを利用されるとよいかと。

Comments

[matahiro]

ご回答いただき、ありがとうございます。
IEにはいつも苦しめられます。。。来年サポートが終了するみたいなので、早く対応を考えなくてもよくなる日が来ることを願います。
一度CSSハックの導入も検討してみようと思います。