Touchmove Pointer-Events: None CSS Doesn't Work on Chrome for Android 4.4/Chromeview

Touch through an element in a browser (like pointer-events: none)

Perhaps this should've been obvious, but I found an answer. Only doing pointer-events: none does work, but only rarely, and I have to move my fingers around quickly to get it to trigger right. In order to make it work 100%, I added a touchstart event listener to the overlay element, like so:

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

This seems a bit silly, but maybe it has to do with how CSS and JavaScript are stepping on each other's toes these days. I don't know.

Interestingly, without e.preventDefault(), it still works, but not 100% of the time. I'm not sure that line is strictly required for this operation to work correctly.

Edit: This is in Android Chrome 31.0.1650.59 by the way.

CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Try this jQuery solution: http://jsbin.com/uhuto

Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.

Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

Disabling pointer events for inspect element

According to this https://code.google.com/p/chromium/issues/detail?id=136887 it is proper behaivor.
What was before (when you can't inspect elements with "pointer-events:none") was a bug.

Chromium has tests for this fix: https://chromium.googlesource.com/chromium/blink.git/+/dfcf6a3782dcae5dd16baec94040b931b0791fa6/LayoutTests/inspector/elements/inspect-pointer-events-none.html

`pointer-events: none;` does not work for iframe in Edge

After a farther investigation, it seems that this is a bug in Edge v16 (Edge/16.16299), everything works fine in Edge v15 and below.
So, be careful: in Edge v16, pointer-events: none; does not affect the iframes in any way, even if you applied it to the parent container.

UPD: I had submitted the bug report to the Edge development team, they have fixed it in April release or so
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14961910/

---

Related Topics