Webkit bug with `:hover` and multiple adjacent-sibling selectors

css google-chrome safari webkit css-selectors

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element:

body { -webkit-animation: bugfix infinite 1s; }@-webkit-keyframes bugfix {   from { padding: 0; }   to { padding: 0; } }

css google-chrome safari webkit css-selectors

Easy Fix without Animations

Handled a similar issue here, where this idea of changed pseudo-classes solved it (note: nth-child(n) will always match):

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

css google-chrome safari webkit css-selectors

Alternatively, the fix can be applied only to the elements that are having the update issue rather than to the body element:

.force-repaint { -webkit-animation: bugfix infinite 1s; }@-webkit-keyframes bugfix {    from { fill: 0; }    to { fill: 0; }}