Bug 154807 - CSS pointer-events:none; is not working on iOS Safari
Summary: CSS pointer-events:none; is not working on iOS Safari
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 9.2
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-02-28 20:39 PST by Kazz
Modified: 2016-03-03 10:43 PST (History)
4 users (show)

See Also:


Attachments
sample.html (text/html) (1.69 KB, text/html)
2016-02-28 20:39 PST, Kazz
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.
Comment 5 Radar WebKit Bug Importer 2016-03-03 10:43:06 PST
<rdar://problem/24956807>