IE11のバグ対応


幸いにもIEなんて無視していい案件ばかりをやっていたので、IEのバグに久々に遭遇しました。のでメモしていきます。見つけたら随時更新。ちょっと溜まったので公開。

FIXED : 解決済のもの

flex-basisが効かない

flexboxのバグ。コンテンツが数値よりも大きかったりpaddingなど指定していた時、flex-basisを無視してしまいます。box-sizingだけだと駄目。max-widthも指定してあげる。

.box-container {
    display: flex;
}
.box {
    flex-basis: 50%;
    box-sizing: border-box;
    max-width: 50%;/* for IE */
}

@keyframes を @media の中に書いても無効になる

@keyframes 部分を @media の外に書いて、@media の中で呼び出しましょう。

@keyframes show {
    0% {
        opacity: 0;
    }
    5%, 100% {
        opacity: 1;
    }
}
@media only screen and (min-width: 64em) {
.something {
    opacity: 0;
}
.something.is-loaded {
    animation-name: show;
    animation-duration: 3s;
    animation-iteration-count: 1;
}
/* ------ media query end */
}

・・・こんな単純なアニメーションに @keyframes は使わないと思うけれども。

line-height を rem 単位で指定しても正しくレイアウトされない

2018/05/20 追記。

line-heightrem で指定すると無視されてしまう?模様。

普通の line-heightem 指定で済むのですが、rem-calc 関数を使っているので、円の真ん中にしたいとか言う時に全部 rem で指定したいのですよねー。IEに合わせると他がズレるという状態に。

なので今回は最終手段、hackで対応しておきました。

.something {
    /* 前略 */
    line-height: 3rem;
    /* 後略 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .something {
        line-height: 1.5em;
    }
}

という感じで。ちなみに、このバグのレポートがMSの公式にあったぽいのですが移動していて、新しいURLを探そうとしたらMSのアカウントを求められるというXX仕様まで体験できました。流石MS。

OPEN : 未解決のもの

web font が表示されない場合がある

Noto Font をサブセット化して読み込ませた事例でおきた(Win7 IE11, Win8 IE11)。Serifを文字数をかなり限って読み込ませた方(数Kb)は表示されたのに、Sunsを常用漢字のみのサブセット化されたもの(配布されたものを流用、500Kbほど)は表示されなかった。なのでファイルサイズのせいかと思ったけれど、Noto Sans CJK JP 日本語Webフォントのページは表示されるので、ファイルサイズだけのせいでは無いらしい。複数のWeb Fontは読み込めない?もう実証実験しないと分からないけれど案件ではSunsの部分はメイリオでOKとなったので、保留。ファイルサイズの上限値も分からないまま。

参考ページ

2018/10/19 追記

Google FontsのNoto Serif JPがIE11で表示されない時の解決法

でほぼ解決かと思われる。が、2つ以上の日本語Webフォントが読み込めるかのテストはしていない。


この記事を書いた人