У всех в детстве была игрушка «магический экран»? Такая прямоугольная штуковина, обычно из красного пластика с двумя крутилками, которые надо было поворачивать, чтобы что-нибудь нарисовать?

А все знают, что браузеры на основе «вебкита» («Хром», «Сафари» и им подобные) некорректно отрабатывают некоторые комбинации CSS3-селекторов? Они «забывают» их перерисовывать, если меняется состояние, зависящее от псевдо-селекторов «:hover», «:target» и другим, которые активно взаимодействуют с внешним окружением.

Меня раздрадает этот баг, ему много лет, его не правят и из-за него невозможно сделать некоторые интересные вещи так, чтобы они работали в «вебките» тоже.

Вчера ночью я про него думал и меня осенило каким образом баг можно использовать, чтобы создать кое-что интересное. Ведь чем этот баг характеризуется? «Залипанием» состояния. Отлично, это можно использовать!

На основе этого бага я наколдовал «магический экран» без использования Джаваскрипта (не забудьте, работает в «Сафари» или «Хроме»). Если вести справа налево кружки́ рисуются, если слева направо — стираются. «Крутилки» только для декора, они не работают.

Шаманство и контакт с космосом происходит вот в этом участке CSS:

.outer>i:hover+i+i {
        width: 10px;
        height: 10px;
        background: gray;
        border-radius: 50%;
        z-index: 2;

        margin: -2px 0 0 -2px;
    }

Поле для рисования состоит из кучи элементов размером 3×3, когда я наезжаю курсором на один из них, срабатывает «:hover» и меняет стиль кружка́, который находится сильно после того, на который я наехал курсором. Это нужно, чтобы «вебкит» не увидел момента, когда курсор уходит с элемента. «Вебкит» хоть и неправильно работает с селекторами, тем не менее содержит кучу «хаков», чтобы в распространённых случаях всё выглядело как надо.

Таким образом, браузер не получает события, что курсор с элемента ушёл и оставляет стиль как есть — я увеличиваю размер элемента до 10×10 и меняю цвет на серый, на экране за курсором остаётся шлейф из таких элементов справа от курсора. Если же двигаться слева направо, наезжая на кружки, то браузер видит нужные события и очищает стиль, кружки пропадают.

В самых свежих «Сафари» 5.1 и «Хроме» 24 мой «магический экран» работает.