Ошибка Webkit с `: hover` и несколькими соседними селекторами

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

a:hover + div {}

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

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

div:hover + a + div {}

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

Однако, если вы сначала наведите указатель мыши на <a> и затем наведите указатель мыши на <div>, стиль будет применен так, как это должно быть.

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

div:hover ~ div {}

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

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

для OS X.

Любые идеи?

Ответы

вы можете преодолеть псевдоклассы 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:

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

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