AndroidのChromeで、以下のCSSが全く反映されません

Question

別の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で１つずつチェックしてみましたが、いずれもOKでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Androidのバージョンは、5.0.2 で、Android Crhomeのバージョンは50.0.2661.89です。

Answer 1

ぱっと思いついただけですと、
bubbleの親要素のpositionがabsoluteだったりするか
bubbleやその親要素のz-indexを指定したらどうなるか
を考えますが、なんとも言えません。
z-indexはブラウザやデバイスによって違うことがあるので結構ハマったことがあります。

再現できる最小限のhtmlも添えてあるともっと回答が付くと思いますよ。

Comments

[mari.rinn]

＞nobuzohさん

ご回答くださりどうもありがとうございます！
そ、それが、キャッシュをクリアしてみたら、なぜか正常に表示されるようになりまして、問題が解決してしまいました。
せっかく考えていただいたのにすみません！

でも、z-indexとかまったく知らなかったので調べてみて１つ勉強になりました。
どうもありがとうございました～！
これに懲りませず、また何かありましたらよろしくお願いいたします～！