Как мы :hover на iOS побеждали…

Ни для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах… Самый яркий для меня пример, это обработка псевдокласса : hover. Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG/ — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1/ «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером… Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1/ Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert ('click'). Это происходит потому, что iOS понимает что за : hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта. Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с : hover разом — прошу под кат…Читать дальше →

© Habrahabr.ru