I'm using the Ionic framework to develop a mobile app and am testing it using the Ripple emulator. I can't click buttons. I think this problem came along with a Chrome update, but I'm not sure. I have isolated the problem down to the following css in the default ionic.css:
.button:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: ' '; }
the problem can be easily produced as follows:
<button class="button">hello</button>
Please see http://codepen.io/anon/pen/bNXpaV
It seems this is caused by some interplay of the position and content properties being set. I can fix the problem by removing content: ' ' or by setting content: normal in a second css block (I don't want to modify the ionic.css source)....but why is this happening?
Because the :after content spans the entire page. If you added background: red to the CSS, you would what I mean by this.
When an element is position: absolute, the top left right and bottom coordinates are relative to the nearest parent with a specified position attribute. In this case the parent element is body.
Pointer events do not go through pseudo-elements by default which is why you cannot click the button through the overlay (I hope this makes intuitive sense).
Try adding pointer-events: none to :after. You should now be able to click the button even though it is underneath the red block, because none tells the browser to ignore pointer events on the :after pseudo-element.
.button:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: ' ';
background: red;
pointer-events: none;
}