2016-07-14 6 views
0

я в настоящее время сталкивается следующий вопрос:Android WebView: CSS масштаб не скрывает оригинальный

Я добавил WebView в моей основной деятельности (уровень 22 API) и загружены некоторые веб-контента.
В какой-то момент вам нужно выбрать одного или нескольких сотрудников из списка, выбранные сотрудники выбираются с небольшой трансляцией: scale (,) animation.
Однако WebView не скрывает исходный элемент во время и после анимации.

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

Как вы можете видеть, оригинальный элемент, а иногда лишь часть остается.

здесь CSS я использую:

.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 (V: 46.0.x) и стандартного браузера Android. Отмена выбора одного элемента мгновенно удаляет все остальные остатки. Есть ли способ справиться с этим, возможно, с анимацией jQuery вместо CSS3? Способ обновления моего устройства (Acer Iconia One 10 (nt.lc8ee.001)), чтобы он работал без проблем с обработкой?

Большое спасибо заранее!

ответ

0

На данный момент я использовал другой CSS для обхода этой проблемы. я добавил обертку класс + элемент:

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

и модифицировали другие классы, как это:

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

теперь выглядит так же, с другой, что она не производит каких-либо сделать вопросы на моем устройстве.

 Смежные вопросы

  • Нет связанных вопросов^_^