質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.93%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 167

score 7

画像の上に細かなドットをかぶせるために、以下のような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検索したのですが、めぼしい情報が見つからず、ご教示いただきたく存じます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/06/14 09:57

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

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/06/14 09:44

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る