cssがアンドロイドには反映さているが、iPhoneには反映されない

実機で確認したのですが、アンドロイドにはcssが反映さているのですが、iPhoneには反映されていませんでした。

HTML
1<div class="slider_slide slide-0 active" id="slider_slide0">
2    <div class="slide__bg slide__bg0">
3        <div class="slider_slide_filter">
4            <div class="slider_slide_bg_letter slider_slide_bg_letter0">UYUNI</div>
5        </div>
6    </div>
7</div>

css
1.slider_slide_filter {
2    content: '';
3    position: absolute;
4    top: 0;
5    left: 0;
6    width: 100%;
7    height: 100%;
8    background-color: rgba(11, 15, 39, 0.83);
9    transition: all 2s ease 2s;
10}
11
12.slider_slide_bg_letter {
13    background-position: 0px center, 0px center;
14    background-size: cover;
15
16    position: absolute;
17    width: 100%;
18    height: 100%;
19    display: flex;
20    justify-content: center;
21    align-items: center;
22    z-index: 8;
23    font-size: 12vw;
24    font-weight: 800;
25    background-clip: text;
26    -webkit-background-clip: text !important;
27    color: transparent;
28    -webkit-text-fill-color: transparent !important;
29}
30
31.slider_slide:nth-child(1) {
32    left: 0;
33    z-index: 10;
34}
35.slide__bg0 {
36    left: 0;
37    background-image: url('S__4825090.jpg');
38}
39
40
41.slider_slide_bg_letter0 {
42    background-image: url('S__4825090.jpg');
43}

アンドロイドの見た目
]
iPhoneの見た目

ご教授頂けたら幸いです。宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

たまにこういった現象おきますね。
いつも自分は実機の解釈を確認します。
https://taupe.site/entry/ios-safari-web-inspecter/

macにiphoneを繋いで開発ツールを開くと
実機がどう解釈しているかが確認できます。

また以下のサイトでcssプロパティやJSの関数などのブラウザごとの実装が確認できます。
https://caniuse.com/

background-clip: textはまだ実装が不安定なようでした。

投稿2019/10/27 16:36

編集2019/10/29 03:29

ruuusaamarki

総合スコア468

ntttt

2019/10/28 21:16

ruuusaamarkiaさん、ご回答頂きありがとうございます。今まで聞いたこともなく、初めての経験でした。原因を解明することはとても難しそうですね。諦めずに頑張って、原因を探してみたいと思います。情報提供してくださり、ありがとうございました。

ruuusaamarki

2019/10/29 03:26

実機でなく恐縮ですが少し調査してみました。 macのsafariでも同じ現象が確認できたのでおそらくsafariの仕様と予想します。 display: flexと background-clipのプロパティが重なると切り抜かれない動きになりますね。少しレガシーな書き方＆他との兼ね合いは再考が必要になるかもしれませんが当方のシュミレート環境では以下で再現ができました。 <style> .slider_slide_filter { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83); transition: all 2s ease 2s; /*以下追加したもの*/ display: table; } .slider_slide_bg_letter { color: transparent; -webkit-text-fill-color: transparent !important; background-position: 0px center, 0px center; background-size: cover; /* position: absolute; */ width: 100%; height: 100%; /* display: flex; justify-content: center; align-items: center; */ z-index: 8; font-size: 12vw; font-weight: 800; background-clip: text; -webkit-background-clip: text !important; /*以下追加したもの*/ display: table-cell; vertical-align: middle; text-align: center; } .slider_slide:nth-child(1) { left: 0; z-index: 10; } .slide__bg0 { left: 0; background-image: url('newsunafter201910.jpg'); } .slider_slide_bg_letter0 { background-image: url('newsunafter201910.jpg'); } </style> </head> <body> <div class="slider_slide slide-0 active" id="slider_slide0"> <div class="slide__bg slide__bg0"> <div class="slider_slide_filter"> <div class="slider_slide_bg_letter slider_slide_bg_letter0">UYUNI</div> </div> </div> </div> </body> cssプロパティを書く順番でも適用されないという記事もあったのでその辺りは都度試した方が早いかもしれません。

ntttt

2019/10/30 11:23

返信が遅くなり、すみません。 ruuusaamarkiさん、コードまで考えて頂き、本当にありがとうございます。こちらのコードを参考にしながら、試行錯誤してみたいと思います。色々とご教授下さり、ありがとうございました。

行動規範の内容に同意します