залипающий ховер.png

Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках.
Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.

<h3>Первая теория: плагин работает некорректно</h3>

<p>Что мы&nbsp;проверили:</p>
<ul>
  <li>Плагин не&nbsp;оборачивает правила?
Нет, всё&nbsp;ок. После сборки <code>hover</code> был в&nbsp;медиазапросах.</li>
  <li>Не&nbsp;работает <code>hover: hover?</code>
Проверили в&nbsp;эмуляции мобильных устройств&nbsp;&mdash; работает.</li>
</ul>

<p>Значит, проблема не&nbsp;в&nbsp;плагине.</p>
&nbsp;

<h3>Вторая теория: баг на&nbsp;отдельных устройствах</h3>

<p>Мы&nbsp;начали тестировать разные модели через Browserstack. На&nbsp;большинстве устройств всё нормально, но&nbsp;есть&nbsp;одно&nbsp;но.</p>

<p>Samsung Galaxy игнорирует всё.</p>
<p>Ему всё равно, что мы&nbsp;оборачиваем <code>hover</code> в <code>@media (hover: hover)</code>. Он&nbsp;отвечает: &laquo;Да-да, я&nbsp;поддерживаю <code>hover</code>&raquo;, а&nbsp;потом предательски залипает.</p>

<p>Дальнейшая проверка показала, что дело не&nbsp;только в&nbsp;Galaxy. Похожая история случается и&nbsp;на&nbsp;некоторых моделях Vivo.</p>

<img src="/uploads/vc_2_2_724c99934a.png"> 

<p>В&nbsp;процессе поиска ответов мы&nbsp;наткнулись на&nbsp;<a href="https://habr.com/ru/companies/ruvds/articles/556156/">интересную статью</a> о&nbsp;том, как определять устройства с&nbsp;тачскрином&nbsp;на&nbsp;чистом CSS. Такой способ удобен и&nbsp;для SSR, поэтому мы&nbsp;его изучили. Были варианты и&nbsp;с&nbsp;хуками, но&nbsp;они работают только на&nbsp;клиенте.</p>
&nbsp;

<h3>Как проверить вашу мобилку</h3>

<p>Если интересно, вот ссылки, чтобы прогнать ваши устройства:</p>
<ul>
  <li><a href="https://developer.chrome.com/docs/devtools/remote-debugging?hl=ru">Подключение Android к Chrome DevTools</a></li>
  <li><a href="https://www.browserstack.com/docs/live/local-testing/set-up-local-testing">Локальное тестирование через Browserstack</a></li>
</ul>
&nbsp;

<h3>Глубже в&nbsp;проблему: откуда берётся true?</h3>

<p>Возникает логичный вопрос: как браузер определяет, что событие hover поддерживается?</p>

<p>Мы&nbsp;обратились к&nbsp;исходникам Chromium. Там есть файл <a href="https://github.com/chromium/chromium/blob/main/ui/events/event.cc">event.cc</a>, где перечислены все события. В&nbsp;нём&nbsp;видно:&nbsp;браузер&nbsp;получает события от&nbsp;ОС.</p>

<p>А&nbsp;в&nbsp;файле <a href="https://github.com/chromium/chromium/blob/main/ui/events/platform_event.h">platform_event.h</a> можно заметить, что тип события зависит от&nbsp;платформы (Windows, Mac, iOS, Linux).</p>

<p>То&nbsp;есть:</p>
<ul>
  <li>Аппаратная часть устройства сообщает&nbsp;ОС, что за&nbsp;событие произошло.</li>
  <li>ОС&nbsp;передаёт его браузеру через драйверы и&nbsp;обработчики.</li>
  <li>Браузер преобразует его в&nbsp;знакомые нам события, с&nbsp;которыми мы&nbsp;работаем.</li>
</ul>

<p>Отсюда и&nbsp;ответ: если устройство сообщает, что <code>hover</code> есть, браузер возвращает <code>true</code> на <code>window.matchMedia(&rsquo;(hover: hover)&rsquo;).</code></p>
&nbsp;

<h3>MDN и&nbsp;медиазапрос pointer</h3>

<p>На&nbsp;MDN мы&nbsp;нашли медиазапрос <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer">pointer</a>. Он&nbsp;определяет, какое устройство ввода подключено:</p>
<ul>
  <li><code>fine</code>&nbsp;&mdash; точное устройство (мышь, тачпад, стилус).</li>
  <li><code>coarse</code>&nbsp;&mdash; неточное (палец).</li>
</ul>
&nbsp;

<p>Проверить это можно так:</p>

<pre><code>window.matchMedia('(pointer: coarse)');</code></pre>
<pre><code>window.matchMedia(&rsquo;(pointer: fine)&rsquo;).</code></pre>

<p>Метод возвращает объект с&nbsp;полем <code>matches</code>, где и&nbsp;видно, какое устройство ввода сейчас активно.</p>
&nbsp;

<h3>Почему pointer: fine недостаточно</h3>

<p>На&nbsp;первый взгляд кажется: давайте использовать только <code>pointer: fine</code> и&nbsp;забудем про hover. Но&nbsp;не&nbsp;всё&nbsp;так&nbsp;просто.</p>
<ul>
  <li>У&nbsp;некоторых устройств <code>pointer: fine</code> возвращает <code>true</code>, но&nbsp;<code>hover</code> они не&nbsp;поддерживают.</li>
  <li>Стилусы иногда определяются как <code>fine</code>, но&nbsp;тоже не&nbsp;имеют hover.</li>
</ul>
&nbsp;

<p>Поэтому мы&nbsp;должны проверять оба условия:</p>
<p><code>@media (hover: hover) and (pointer: fine) { ... }</code></p>
&nbsp;

<h3>А&nbsp;как&nbsp;же спецификация?</h3>

<img src="/uploads/vc_1_2_89fc7a853f.png"> 

<p>Если обратиться к&nbsp;<a href="https://www.w3.org/TR/mediaqueries-4/#pointer">спеке W3C</a>, то&nbsp;там есть важное уточнение. Даже если устройство имеет <code>pointer: coarse</code>, это&nbsp;не&nbsp;значит, что точные клики невозможны. Это говорит о&nbsp;том, что мы&nbsp;можем совершать точные клики при&nbsp;помощи того&nbsp;же стилуса.</p>
<p>Иными словами: медиазапросы дают разработчику лишь подсказку о&nbsp;том, как лучше строить интерфейс, а&nbsp;не&nbsp;жёсткую гарантию.</p>
&nbsp;

<h3>Решение:</h3>

<p>Мы&nbsp;пришли к&nbsp;следующему варианту: используем медиазапрос <code>(hover: hover) and (pointer: fine)</code>, чтобы&nbsp;hover-стили&nbsp;применялись&nbsp;только&nbsp;на&nbsp;устройствах с&nbsp;мышью или тачпадом.</p>

<p>Варианты внедрения</p>
<ul>
  <li>Обернуть стили вручную. Подходит для небольших проектов.</li>
  <li>Допилить оригинальный плагин.</li>
  <li>Написать свой.</li>
</ul>

<p>Так как в&nbsp;репозитории оригинального плагина давно висят нерешённые реквесты, мы&nbsp;решили не&nbsp;ждать и&nbsp;сделать свой.</p>
&nbsp;

<h3>Наш плагин</h3>

<p>Когда стало ясно, что простого <code>hover: hover</code> недостаточно, мы&nbsp;решили создать свой плагин.</p>

<p>Чтобы сделать использование плагина удобнее и&nbsp;безопаснее, мы&nbsp;сделали версию на&nbsp;<a href="https://github.com/Hwaiteu/postcss-media-hover-fix">TypeScript</a>.</p>

<p>Это дало:</p>
<ul>
  <li>Чёткую типизацию входных и&nbsp;выходных данных;</li>
  <li>Упрощённое отлавливание ошибок на&nbsp;этапе разработки;</li>
  <li>Более структурный и&nbsp;понятный код для будущих изменений.</li>
</ul>

<p>Теперь у&nbsp;нас есть &laquo;боевая&raquo; версия плагина, которую можно смело подключать в&nbsp;проект и&nbsp;не&nbsp;переживать за&nbsp;<code>hover</code> на&nbsp;мобильных устройствах.</p>
&nbsp;

<h3>Итог</h3>

<p>История с&nbsp;залипающим hover показала: полагаться только на&nbsp;hover: hover не&nbsp;стоит&nbsp;&mdash; иногда он&nbsp;&laquo;залипает&raquo; и&nbsp;слегка раздражает пользователя, хотя интерфейс при этом и&nbsp;не&nbsp;ломается.</p>

<p>С&nbsp;нашим решением hover остаётся только там, где он&nbsp;действительно нужен, а&nbsp;&laquo;притворщики&raquo; типа тачскринов больше не&nbsp;вмешиваются.</p>

<p>В&nbsp;результате мы&nbsp;получили полезный и&nbsp;интересный опыт в&nbsp;автоматическом оборачивании hover в&nbsp;медиазапросы с&nbsp;более полным условием. Залипающий hover больше не&nbsp;раздражает, а&nbsp;ручное прописывание условий стало не&nbsp;нашей головной болью&nbsp;&mdash; так&nbsp;мы (а&nbsp;теперь и&nbsp;вы) можем чуть расслабиться и&nbsp;довериться автоматике.</p>

Ступина Ксения

Бриф сам себя не заполнит

hello@mish.design

Москва

Нижний Новгород