CSS hover срабатывает более одного раза с помощью 3d-преобразования webkit

Когда я использую 3D-преобразование webkit при наведении, работают только верхние 50% области наведения, а нижние 50% нестабильны. В настоящее время я тестирую Chrome (31.0.1650.63). Это ошибка? Есть ли обходной путь?

Попробуйте навести указатель мыши на верхнюю часть div и медленно опустить ее вниз.

HTML

<div class="hoverArea"></div>
<div class="flip">
    <div class="front">front</div>
    <div class="back">back</div>
</div>

CSS

.hoverArea, .flip, .front, .back {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
.hoverArea {
  z-index: 10;
}
.flip {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -webkit-perspective: 800;
  z-index: 9;
}
.front {
  background-color: #f00;
  -webkit-backface-visibility: hidden ;
}
.back {
  background-color: #f0f;
  -webkit-transform: rotatex(-180deg);
  -webkit-backface-visibility: hidden ;
}
.hoverArea:hover + .flip {
  -webkit-transform: rotatex(-180deg);  
}

http://jsfiddle.net/4P53y/


css hover transform webkit-transform
person Andre Fuentes    schedule 14.01.2014    source источник
comment
Мне кажется, все в порядке, а можно поподробнее, в чем проблема?   -  person Josh Powell    schedule 14.01.2014
comment
В хроме 32 нижняя половина работает на 100%, а верхняя глючит.   -  person Ashley Medway    schedule 14.01.2014
comment
Мне кажется, в V.31 все нормально   -  person Paulie_D    schedule 14.01.2014
comment
у меня работает на win8 - 31.0.1650.63   -  person denolk    schedule 14.01.2014
comment
@JoshPowell, когда я навожу мышь на верхние 50% области div.hoverArea, 3D-эффект хорош, но когда я навожу мышь на нижние 50% области div.hoverArea, она продолжает вращаться как сумасшедшая   -  person Andre Fuentes    schedule 14.01.2014
comment
Ах, хорошо, хорошо, я понимаю, что вы имеете в виду.   -  person Josh Powell    schedule 14.01.2014
comment
@Paulie_D, пожалуйста, попробуйте навести указатель мыши на верхнюю часть div и медленно опустить ее вниз. Работает?   -  person Andre Fuentes    schedule 14.01.2014
comment
@Андре Фуэнтес, кажется. Какое ожидаемое поведение не происходит?   -  person Paulie_D    schedule 14.01.2014

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете исправить это, удалив элемент .hoverArea и вместо этого применив событие :hover к элементу .flip.

.flip:hover {
    -webkit-transform: rotatex(-180deg);    
}

Демо

Если вы хотите по-прежнему использовать элемент .hoverArea, вы можете использовать transform:translateZ(1px); на .hoverArea, чтобы он работал правильно. Это заставляет браузер отображать элемент более тщательно.

.hoverArea {
    z-index: 10;
    -webkit-transform:translateZ(1px);
}

Демо

person Zach Saucier    schedule 14.01.2014
comment
Ты на одну минуту быстрее меня. Ваше здоровье - person FreshPro; 14.01.2014
comment
Хорошо работает, спасибо! Я думал, что поведение зависания испортится, если я 3d трансформирую себя, поэтому я использовал для него другой элемент. - person Andre Fuentes; 14.01.2014
comment
@AndreFuentes Также добавлена ​​альтернатива, позволяющая использовать .hoverArea для работы в случае, если вы хотите, чтобы он покрывал большую площадь, чем .flip. - person Zach Saucier; 14.01.2014