ラック
Home > ブログ > 記事 > 2017年10月 > mobileSafariでbackground-attachement:fixedとbackground-size:coverが効かない

mobileSafariでbackground-attachement:fixedとbackground-size:coverが効かない

カテゴリ: ホームページ,スマホ,ブラウザ

以前(iPhone・iPadのSafariでbackground-imageが一部しか表示されない続・iPhone・iPadのSafariでbackground-imageが一部しか表示されない)も対処したつもりだったのですが、イマイチ直っていないことが分かったので改めて挑戦。

css(Scss)


        &:not(.mobile_Safari){
            background: url("../img/bg.jpg") no-repeat center center fixed;
            background-size: cover;
        }
        &.mobile_Safari { //index.jsでUAにより付与。mobile Safariバグ対策
            &:before {
                background: url("../img/bg.jpg") no-repeat left top;
                background-size: auto 100%; //画像とデバイスによっては100% autoでも
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding-bottom: 108px;
                content: " ";
                z-index: -1;
            }
        }

jsでユーザーエージェント判定して、iPhoneないしiPadならばクラスmobile_Safariを付与すること前提ですが、こんな感じで。なお、position: fixed;z-index: -1;の都合上、画像が複数枚の場合は対応できないので注意。

参考

タグ: css,トラブル対処,バグ,Sass(Scss),Safari

 



関連する記事一覧