「IE11」でスクロール時に固定背景画像がカクつく問題 | 創kenブログ
リンクをコピー IE（Internet Explorer）に泣かされることは多々あります。 WEB制作者の頭痛の種です。 徐々にIEの各バージョンも引退しつつありますが、最後の砦である「IE11」は未だ現役です。 今回はこの「IE11」で、スクロール時に固定背景画像がカクつく問題についてです。 発生条件 発生条件は、CSSで背景画像に 「position : fixed」 「background-attachment : fixed」 どちらかを適用した場合に起こるようです。 ま、百聞は一見にしかず。 以下のページをPCから見てください（スマホ・タブレットは画像非表示）。 ＊サンプルtmp001（no-js） Chrome・Firefox・Edge・Safariなどでは普通に見れます。 普通のサンプルサイトです。 今度はこれをIEで見てみましょう。 マウスでページをスクロールすると、ページ
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
@supportsとIE11
Internet Explorer 11以下では@supportsがサポートされていない。そのおかげで実装ベースで(CSSハックなどというものなしに)安全にCSSの新機能を試せるようになった。しかしそうなるとIE11などというもののために大量の@supportsが出てくることになり、精神衛生上良くない。実装がある方を優先させCSS全体を適当な@supportsで括ってしまえば良さそうだ。 View Demo: Ban <=IE11 with @supports デモの段落は@supportsをサポートしている安定ブラウザーでは緑になり、IE11ではちゃんと赤になる。不明なAt規則とその子は無視されるようになっていることが確認できる。CSS仕様でもそうだが、IE11以下を含めおおよそすべてのブラウザーでこういう実装になっているはずだ。 CSS全体を括るのは雑過ぎるので、実際にはFlexbox
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
CSSだけで<select>をカスタマイズする - Qiita
Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択
游明朝体・游ゴシック体の使用は注意しなくてはならない・・・ やってくれるねIE先輩！ - Qiita
WindowsでもMacでも同じフォントが使えるということで游ゴシックを試してみたのですが、IEでレイアウトがずれてしまいました・・・。 キャプチャを見てもらえれば分かるかと思うのですが、文字の下に謎の余白？が出来てしまっています MSコミュニティにもこんな質問があがっていました。 IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる 相変わらずIE先輩には悩まされますね・・・ 検証コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>游書体テスト</title> <style type="text/css" media="screen"> html { box-sizing: border-box; font-size: 16px; line-height: 1.5;
Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEとcalcとpaddingのバグ - Qiita
最新版IEでセレクトボックスの矢印を消す - knowledge base)
Detecting a Pinned Site (Windows)