Пишу, по большей части, про историю, свою жизнь и немного про программирование.

Как обойти баг со сложными селекторами CSS3 в «Вебките»

В «Вебките» (а значит в «Хроме» и «Сафари») есть баг с поддержкой сложных селекторов CSS3. Насколько мне рассказывали, это даже не баг, а сознательное решение. Относится он к сложным селекторам, связанным с «:target», «:checked» и ещё некоторым. Смысл в том, что у браузера как будто нет внутренних проверок на то, что условия поменялись (изменился элемент, на который должен указывать «:target», например) и надо переприменить селекторы к элементам.

Оказывается есть способ «подтолкнуть» браузер к этой проверке. Достаточно сделать пустую анимацию на нужном элементе. Вероятно это снижает производительность, так что осторожно, но зато работает:

section {
    -webkit-animation: 0.1s hack infinite;
}
            
@-webkit-keyframes hack {
    from {margin: 0; padding: 0;}
    to {margin: 0; padding: 0;}
}

Теперь в теге «section» эти сложные селекторы будут срабатывать.