幸いにも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-height をrem で指定すると無視されてしまう？模様。
普通の line-height は em 指定で済むのですが、rem-calc 関数を使っているので、円の真ん中にしたいとか言う時に全部 rem で指定したいのですよねー。IEに合わせると他がズレるという状態に。
なので今回は最終手段、hackで対応しておきました。
.something {
/* 前略 */
line-height: ３rem;
/* 後略 */
}
@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となったので、保留。ファイルサイズの上限値も分からないまま。
参考ページ
- 文字情報基盤Webテクニカルレポート
— かなり前の日本語Webフォントの実証実験。ファイルサイズの大きさに言及しているけれど、表示されない原因は突き止めてない。 - ウェブフォントの最適化 | Web | Google Developers
— Webフォントの情報を網羅しているページ。 - CSS Fonts Module Level 3 （日本語訳）
— 付録の中の「Windows 上では、 Microsoft は — 後方互換性を得るため — このファミリ名に対する書体数の上限を 4 個までとすることに決めた。」ていう元の文献がどれか分からない。
2018/10/19 追記
Google FontsのNoto Serif JPがIE11で表示されない時の解決法
でほぼ解決かと思われる。が、2つ以上の日本語Webフォントが読み込めるかのテストはしていない。
