1286191 - Pseudo elements in buttons are not clickable

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Memmie Lenglet]

Attachment: https://jsfiddle.net/98j7vo8k/1/

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160706215822

Steps to reproduce:

1. Create a button element with a pseudo element overflow the button border-box
2. Click on the overflowed part


Actual results:

The button can't be click with its pseudo element. If you use an other element like a span or a div, you can click on the pseudo element


Expected results:

Click on the pseudo element whatever the element is

Comment 1

[Jet Villegas (inactive)]

Works in Safari & Chrome.

Comment 2

[ilya.streltsin]

It seems that the bug is not limited to pseudo elements and affects anything inside the button that is positioned outside its border. Example: https://jsfiddle.net/Ld1dyus4/ (part of pseudo element contained in the button is clickable, but the rest of this pseudo element, positioned span and positioned pseudo element are not clickable).

Comment 3

[lord]

Could you look into that issue please, 3 years is a little long for such small yet important issue regarding <button> usage.
That could force some people using a <a> or hacky <div> faking <button>. I myself will have to use such hack on a 3 Million visitors per month website.

Thank you!