Почему тег «a href» при клике на него не работает?

Question

[VinBear]

Сразу замечу что баг смог воспроизвести только на webkit-браузерах, и это были opera, chrome и яндекс-браузер. В ie11, firefox этого бага нет.

Допустим есть некий тег a, у него есть некий атрибут href, содержащий соотвественно некий url.
И если стилизовать этот тег как display: inline-block или просто block, проставить какие-нибудь паддинги, то у него внутри появляется небольшая область, нажатие на которую не приводит ни к переходу по ссылке указанной в href, ни даже к появлению события click.

Вот такой простой html
<a class="fancy-link" href="http://google.ru/">Некая ссылка</a>

Говоря что не появляется событие click я имею в виду что не срабатывает вот такое простейшее событие:

$(document).on('click', '.fancy-link', function () {
        console.log('clicked');
 });

Если кликать не в проблемную область, то событие ожидаемо срабатывает.

Здесь полный пример: codepen.io/anon/pen/rvGgy
Конкретно в данном примере нерабочая область имеет высоту в 2 пикселя и находится точно под текстом. На том же уровне, но уже не под текстом ссылка работает.


Никакой информации по этому багу нагуглить не удалось, как-то избавиться от него тоже не удалось, и посему вопрос — можно ли как-то сделать этот самый тег полностью, так сказать, кликабельным?

Answer 1

[Александр Кит]

Очуметь, и вправду - слепая область в пару пикселей. Немного поигравшись с примером пришел к выводу, что проблема в следующем:
- перед кликом, в слепой области, курсор находится над `а` (но не над текстом! `padding`)
- во время клика кнопка уходит вниз (`:active `) и курсор наезжает на текст
- и клик не отрабатывает, потому что нажатие началось над `а`, закончилось над текстом.

Такой же эффект, если мы при `:active` сдвигаем кнопку через `relative/top` а не через `margin`. codepen. Заметьте, что слепая область при `top:8` увеличилась на 8px.

Лечим через pointer-events codepen

Но мне кажется, что такое поведение заслуживает баг репорта, или кто-то имеет больше информации по этому поводу?

Comments

[VinBear]

@tenbits Спасибо за pointer-events, сильно помогло)

Answer 2

[Руслан Лопатин]

Да, действительно воспроизводится. Chromium 32.0.1700.102 (246481). GNU/Linux x86_64.

Answer 3

[Кирилл Арутюнов]

Мне из хрома не удалось воспроизвести этот баг. Под текстом всю область обкликал :)

Comments

[VinBear]

Попробуйте увеличить масштаб страницы и в примере прямо на указанном уровне прокликать, область действительно крайне мала.

[Кирилл Арутюнов]

@VinBear попал-таки. Но это крайне сложно было сделать.
Там не образуется каких-нибудь бордеров или что-то такое?
Область-то как раз на месте бордера находится.

[VinBear]

@SOKOJI В том то и дело что там один единственный тег «a» и область находится не на границах, а прямо внутри него, при том что во все стороны от нее, что вверх, что влево, что вправо или вниз ссылка кликабельна, ну то есть как на изображении в посте. Подскажите, пожалуйста, свою ОС. Я попробовал на windows 7 и 8, на линуксе и макоси соответсвенно не проверял, возможно там баг не повторяется.

[Кирилл Арутюнов]

@VinBear 8ая винда. Попробую на айпаде чуть попозже покликать.