Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

«Магический экран» на 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 мой «магический экран» работает.

9 комментариев
greli (greli.livejournal.com) 2013

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

greli (greli.livejournal.com) 2013

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

Евгений Степанищев (bolknote.ru) 2013

Комментарий для greli.livejournal.com:

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

Кириллович Алик (www.alik.su) 2013

Если же двигаться справа налево, наезжая на кружки, то браузер видит нужные события и очищает стиль, кружки пропадают.

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

Евгений Степанищев (bolknote.ru) 2013

Комментарий для www.alik.su:

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

PastorGL 2013

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

Евгений Степанищев (bolknote.ru) 2013

Комментарий для PastorGL:

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

Перельман 2017

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

Перельман 2017

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