iziModalでsafariだけ表示がちらつく

css/コーディング

自分のポートフォリオをsafariで見てみたら、モーダルを開いた時にチラツキが出ているのを発見。

モーダルの実装にはプラグインのiziModalを使用しています。

こんな感じ

 

解決策

.iziModal-overlay クラスに対して

-webkit-transform:translateZ(-1000px);  を付与します。

 

cssはこんな感じになります。

.iziModal-overlay{
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
-webkit-transform:translateZ(-1000px);
/* ↑これを追加!↑ */
}

なんか力技っぽい気がしなくもないですが、とりあえず解決しました。

ソースはこちら

タイトルとURLをコピーしました