Ошибка Webkit с `:hover` и множеством селекторов смежных братьев и сестер

Safari и Chrome, а также Opera и Firefox могут справиться с :hover селекторы псевдокласса и соседних братьев и сестер:

a:hover + div {}

Это работает.

Однако, когда добавляется еще один соседний брат:

div:hover + a + div {}

Webkit разваливается.

Тем не менее, если вы впервые наведите курсор на <a> а затем наведите курсор на <div> стиль применяется так, как должен.

Я еще больше сбит с толку, потому что если вы добавите:

div:hover ~ div {}

с объявленным стилем или без него, он начинает работать так, как должен.

демонстрация

Я вижу эту проблему в:

  • Google Chrome 15.0.874.121
  • Safari 5.1.1

для OS X.

Есть идеи?

3 ответа

Решение

Вы можете преодолеть ошибки псевдо-классов Webkit + общих / смежных селекторов братьев и сестер, симулируя анимацию на элементе body:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

Вы можете проверить это здесь: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

Легко исправить без анимации

Здесь решена аналогичная проблема, когда эта идея измененных псевдоклассов решила ее (примечание: nth-child(n) всегда будет соответствовать):

div:hover + a:nth-child(n) + div

В качестве альтернативы, исправление может быть применено только к элементам, которые имеют проблему обновления, а не к элементу body:

http://jsfiddle.net/ds2yY/12/

.force-repaint { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
    from { fill: 0; }
    to { fill: 0; }
}
Другие вопросы по тегам