«Магический экран» на CSS

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

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

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

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

Шаманство и контакт с космосом происходит вот в этом участке 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 мой «магический экран» работает.
29 января 2013 09:50

greli (greli.livejournal.com)
29 января 2013, 15:54

Я думаю, из такого экрана выйдет смешной багрепорт (для Вебкита, очевидно).

greli (greli.livejournal.com)
29 января 2013, 15:56

P.S. Под Windows воспроизводится, а это значит что проблема в самом движке, а не, скажем, в подсистеме отрисовки на маках.

bolk (bolknote.ru)
29 января 2013, 16:50, ответ предназначен greli (greli.livejournal.com):

Конечно в самом движке. Говорю же — это известный баг :) Просто из него я придумал такое забавное следствие. У меня есть идея как сделать так, чтобы не стирались кружки (правда есть сомнение, что получится, надо пробовать), но делать лениво.

Кириллович Алик (www.alik.su)
30 января 2013, 13:42

Если же двигаться справа налево, наезжая на кружки, то браузер видит нужные события и очищает стиль, кружки пропадают.
У меня противоположенная ситуация — кружки рисуются исключительно при движении справа налево, стираются исключительно при движении слева направо (Google Chrome / Win).

bolk (bolknote.ru)
30 января 2013, 14:02, ответ предназначен Кириллович Алик (www.alik.su):

Это я просто второпях писал, направления перепутал :)

PastorGL (инкогнито)
30 января 2013, 23:35

Полагаю, если бы такой баг был в ИЕ10, тут бы 100500 каментов про криворукий Микрософт было. Но баг в вебките (в котором подобной раздражающей фигни выше крыши), и практически молчок.

bolk (bolknote.ru)
31 января 2013, 06:11, ответ предназначен PastorGL

Да, меня это всегда очень веселит :) Это и на «Хабре» частая ситуация.

Перельман (инкогнито)
14 июля 2017, 20:28

"У меня противоположная ситуация — кружки рисуются исключительно при движении справа налево, стираются исключительно при движении слева направо (Google Chrome / Win)."
А, может быть, важно направление отрисовки страниц (европа-азия)?

Перельман (инкогнито)
14 июля 2017, 20:38

Вообще-то у меня всё работает нормально - кружочки отрисовавыются по одному и при движении слева направо, при движении справа налево! (Опера 12.18)

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)