|Summary:||CSS pointer-events:none; is not working on iOS Safari|
|Severity:||Normal||CC:||dino, simon.fraser, taken.spc, webkit-bug-importer|
|Hardware:||iPhone / iPad|
Description Kazz 2016-02-28 20:39:48 PST
Created attachment 272474 [details] sample.html (text/html) CSS `pointer-events:none;` is not working on iOS Safari. In OSX, it works (with mouse). Steps: 1. Open the attached file. 2. Tap `home` image. Expected: Move to https://bugs.webkit.org Actual: Nothing happens.
Comment 1 Takeshi Kurosawa 2016-03-03 05:52:57 PST
Please let me clarify that: 1. pointer-events: none makes elements not respond to mouse or tap events 2. Your example intend to make the home image visible but not operable through mice or touch screens 3. The home image is not operable through a touch screen on iOS Safari If 1, 2 and 3 are true, the behavior of iOS Safari is reasonable.
Comment 2 Kazz 2016-03-03 06:40:49 PST
(In reply to comment #1) > Please let me clarify that: > > 1. pointer-events: none makes elements not respond to mouse or tap events Yes, true. > 2. Your example intend to make the home image visible but not operable > through mice or touch screens Not quite so. What intended is that make the home image NOT to be a target of click event, and the parent anchor element behind to be the target of click event. > 3. The home image is not operable through a touch screen on iOS Safari > > If 1, 2 and 3 are true, the behavior of iOS Safari is reasonable. Well, as far as I've tested, iOS (Safari and Chrome for iOS, maybe Firefox for iOS too) is the only the one that doesn't work in this case. MAC OS X + Safari is OK. Windows + IE, Edge, Firefox, Chrome are OK. Linux + Firefox, Midori (a webkit based browser) are OK. Android + Chrome, Firefox, are OK, also Android Browser too.
Comment 3 Takeshi Kurosawa 2016-03-03 07:05:51 PST
Gotcha. You mean <a> element should respond to mouse/touch events regardless of whether or not its only child has `pointer-events: none`.
Comment 4 Kazz 2016-03-03 07:19:16 PST
When the OBJECT element which refers to a SVG with has an A (anchor) element at the parent, CSS `pointer-events:none;` set on OBJECT element does not work. ... Maybe this should be more appropriate description.