Иногда хочется тем или иным кликабельным элементам назначить прозрачность. Менюшкам там каким, кнопочкам, зачастую тем же иконкам соц. сетей. Ну, если хочется, почему бы и нет.
Использовать для сих целей png с прозрачностью - ОК.
А вот назначать прозрачность кликабельным элементам посредством CSS - уже нет, не ОК.
Браузеры - они параноики иногда, особенно мобильные. Понятное дело, что благих целей ради и исключительно безопасности юзера для, но иногда заходят слишком далеко.
Конкретно, например, Safari для iPhone'ов. Если ссылка представлена как элемент с установленным в CSS значением opacity меньшим 1 (хотя тут не совсем уверен, может меньше 0.9 или 0.8, но не суть важно), то она перестает быть кликабельной. Т. е. по единичному тапу по ссылке ничего не произойдет. Хотя ссылка останется ссылкой - если на элементе задержать палец, то всплывет контекстное меню, где уже можно выбрать, переходить по ней или нет. Но это не так чтобы и очевидно.
И ладно, если у нас только соц. кнопки с прозрачностью - не работают для пользователей iPhone, ну и черт с ними. А если главное меню или какой функциональный элемент? При том, что доля айФонов среди мобильных устройств под 50%.
Такая, в общем, не совсем очевидная бага-фича, которую стоит иметь ввиду.
Комментарии
Привет! Хотел поблагодарить тебя за полезные и интересные посты.
Сейчас протестил на своем сайте соц. кнопки с rgba(0,0,0,0.7) на iOS 9.0.2 - все в порядке.
Вот думаю, или я тебя не понял, или же играет роль псевдокласс :hover, в котором кнопка перестает быть прозрачной (0.7->1)
Привет! Спасибо!
Честно признаюсь - особо не тестил, т. к. не на чем.
Код был такой, HTML:
...CSS:
#social a.linkedin img,... {
display: inline-block;
width: 12%;
height: auto;
margin: 0 2%;
opacity: 0.32;
}
#social a:hover {opacity: 0.9;
}
Клиент сказал, что ссылки не кликабельные, iPhone 5, Safari.
Бегло погуглил по теме, наткнулся на следующие статьи:
Т. к. iOS на руках не было для тестов, просто "выпилил" любое упоминание прозрачности для кликабельных элементов, что и решило проблему.
Протестировал код - все ок, на iPad Mini с iOS 8.4, и с iPhone 5C на iOS 9.0.2.
Видимо, это актуально только для 8.4.1, но это так, к сведению. Спасибо!
Спасибо за тестинг! Буду знать. Слегка погорячился со всем iOS, видимо. Некоторые версии Андроидов тоже бажные зачастую, просто с Сафари это преподносилось, как фича, а не баг, вот и подумал, что откатывать уже не будут.
Хотя сейчас глянул, доля 8.4.1 среди iOS порядка 2.5%, вполне себе цифра. Может и излишняя осторожность, но использовать opacity для критичных функциональных элементов больше все же не буду. :3