Created attachment 272474 [details]
CSS `pointer-events:none;` is not working on iOS Safari.
In OSX, it works (with mouse).
1. Open the attached file.
2. Tap `home` image.
Move to https://bugs.webkit.org
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.
(In reply to comment #1)
> 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
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.
Gotcha. You mean <a> element should respond to mouse/touch events regardless of whether or not its only child has `pointer-events: none`.
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.