Android WebView: CSS Maßstab nicht verbergen original

Question

ich zur Zeit das folgende Problem konfrontiert:

Ich habe eine WebView meiner Haupttätigkeit (api Ebene 22) und geladen einige Web-Inhalte.
An einem bestimmten Punkt müssen Sie einen oder mehrere Mitarbeiter aus einer Liste auswählen, ausgewählte Mitarbeiter werden mit einer kleinen Transformation ausgewählt: Skalieren (,) Animation.
Allerdings versteckt das WebView das ursprüngliche Element während und nach der Animation nicht.

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

Wie Sie das ursprüngliche Element sehen können, oder manchmal auch nur ein Bruchteil davon bleibt.

hier die CSS Ich benutze:

.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); 
} 

Dieses Phänomen gilt auch für den Google Chrome (V: 46.0.x) und dem Standard-Android-Browser. Wenn Sie die Auswahl eines Elements aufheben, werden alle anderen Überreste sofort entfernt. Gibt es eine Möglichkeit, vielleicht mit einer jQuery-Animation anstelle von CSS3 umzugehen? Eine Möglichkeit, mein Gerät zu aktualisieren (Acer Iconia One 10 (nt.lc8ee.001)), damit es ohne Renderprobleme funktioniert?

Vielen Dank im Voraus!

Answer 1

Für jetzt habe ich ein anderes CSS zur Problemumgehung verwendet. Ich habe ein Wrapper-Klasse + Element:

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

und die anderen Klassen wie folgt geändert:

.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; 
} 

jetzt sieht es das gleiche, mit den verschiedenen, dass es keine Probleme machen wird produziert auf meinem Gerät.