質問: 別のQ&Aサイトで質問していたのですがまったく回答がつかなかったのでこちらで質問させていただきます。 以下の吹き出し用のCSSを使っているのですが、PCのIEとChromeでは問題なく表示出来てまして、スマホは持ってないのですが、Androidのタブレットで見ると、Androidの標準ブラウザでは問題なく表示されているのですが、 タイトルに書いたように、AndroidのChromeでは、何一つ、一切反映されていません。 対処法が何かありますでしょうか? よろしくお願いいたします! ### 該当のソースコード ``` /* 共通 */ .bubble { display:inline-block; position: relative; padding:1em; border-radius:15px; box-shadow: 5px 5px 15px #afafb0; } .bubble:after { position: absolute; content: " "; height: 0; width: 0; } /* 左三角半分 */ .bubble-half-left:after { right: 100%; top: 10%; border-top:10px solid ; border-left:10px solid transparent; } .pink{ background-color:#e4d2d8; } .pink:after { border-top: 10px solid #e4d2d8; } (backgroundとborder-topの色はランダムでつけるようにしているため、このように別にしてあります(pink以外にも複数ありますが省略してます)) ``` ### 試したこと caniuseで1つずつチェックしてみましたが、いずれもOKでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) Androidのバージョンは、5.0.2 で、Android Crhomeのバージョンは50.0.2661.89です。
回答: ぱっと思いついただけですと、 bubbleの親要素のpositionがabsoluteだったりするか bubbleやその親要素のz-indexを指定したらどうなるか を考えますが、なんとも言えません。 z-indexはブラウザやデバイスによって違うことがあるので結構ハマったことがあります。 再現できる最小限のhtmlも添えてあるともっと回答が付くと思いますよ。