2016-07-14 3 views
0

を隠していない私は現在、次の問題に直面している:のAndroidのWebView:CSS規模は、元

私は私の主な活動(APIレベル22)までのWebViewを追加し、いくつかのWebコンテンツをロードしました。
リストから1人または複数の従業員を選択しなければならない場合、選択した従業員は小さな変換:スケール(、)アニメーションで選択されています。
しかし、WebViewは元の要素をアニメーションの前後に隠すことはありません。

IMAGE:http://i.imgur.com/FUAszRu.png

あなたが見ることができるように、元の要素、またはその時々ほんの一部が残っています。

ここで私が使用してCSS:標準のAndroidブラウザ:

.employee { 
    width: 100%; 
    font-size: 40px; 
    font-weight: bold; 
    background-color: #fff; 
    margin-bottom: 12px; 
    padding: 70px 12px; 
    text-align: center; 
    box-shadow: 0 5px 30px rgba(0, 0, 0, .75); 
    color: #444; 
    cursor: pointer; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
} 

.employee.selected { 
    box-shadow: 0 0 10px rgba(0, 0, 0, .75); 
    background-color: #E6EE9C; 
    -o-transform: scale(0.95, 0.95); 
    -ms-transform: scale(0.95, 0.95); 
    -moz-transform: scale(0.95, 0.95); 
    -webkit-transform: scale(0.95, 0.95); 
    transform: scale(0.95, 0.95); 
} 

この現象はまた、Google Chromeの(46.0.x V)に適用されます。 1つのアイテムを選択解除すると、即座に他のすべての残党が削除されます。 CSS3の代わりにjQueryアニメーションを使って、おそらくそれに対処する方法はありますか?私のデバイス(Acer Iconia One 10(nt.lc8ee.001))を更新して、レンダリングの問題なく動作させる方法?

事前に感謝します。

答えて

0

今のところ、この問題を回避するには別のCSSを使用しました。 私はラッパークラス+要素を追加しました:今ではそれがいずれかの問題をレンダリング生じていないこと、異なると、同じように見える

.employee { 
    width: 100%; 
    font-size: 40px; 
    line-height: 180px; 
    font-weight: bold; 
    background-color: #fff; 
    text-align: center; 
    box-shadow: 0 5px 30px rgba(0, 0, 0, .75); 
    color: #444; 
    cursor: pointer; 
    margin-top: 0; 
} 

.employee.selected { 
    box-shadow: 0 0 10px rgba(0, 0, 0, .75); 
    background-color: #E6EE9C; 
    width: 95%; 
    margin: 6px 2.5%; 
    line-height: 168px; 
    font-size: 38px; 
} 

.employee-wrapper { 
    height: 180px; 
    margin-bottom: 12px; 
} 

をし、このような他のクラスを変更私のデバイス上に。

関連する問題