Why doesn't the "a href" tag work when clicked on?

Question

css

I note right away that the bug could only be reproduced on webkit browsers, and these were opera, chrome and Yandex browser. ie11, firefox does not have this bug.
Let's say there is a certain tag a , it has a certain href attribute containing, respectively, a certain url.
And if you style this tag as display: inline-block or just block, put down some paddings, then a small area appears inside it, clicking on which does not lead to the transition to the link specified in href, or even to the click event.

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

When I say that the click event does not appear, I mean that such a simple event does not fire:

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

If you click not in the problem area, then the event fires as expected.
Here's the full example: codepen.io/anon/pen/rvGgy
In this particular example, the non-client area is 2 pixels high and is exactly below the text. At the same level, but no longer under the text, the link works.

It was not possible to google any information on this bug, somehow it was not possible to get rid of it either, and therefore the question is - is it possible to somehow make this very tag completely, so to speak, clickable?

Answer 1

Crazy, really - a blind area of ​​​​a couple of pixels. Having played a little with the example, I came to the conclusion that the problem is as follows:
- before the click, in the blind area, the cursor is over `a` (but not over the text! `padding`)
- during the click, the button goes down (`:active `) and the cursor runs over the text
- and the click does not work, because the click started over `a`, ended over the text.
The same effect if we move the button through `relative/top` and not through `margin` with `:active`. codepen . Notice that the blind area at `top:8` has increased by 8px.
Treating with pointer-events codepen
But it seems to me that this behavior deserves a bug report, or does anyone have more information on this?

Answer 2

Yes, it does indeed reproduce. Chromium 32.0.1700.102 (246481). GNU/Linux x86_64.

Answer 3

I was unable to reproduce this bug from chrome. I called the whole area under the text :)