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

別の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です。