Merge pull request #2557 from tchak/fix-ios-clicks
Fix event bubbling on Mobile Safari
This commit is contained in:
commit
72f23719e1
4 changed files with 30 additions and 2 deletions
|
@ -83,6 +83,20 @@ form {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Mobile Safari doesn't bubble mouse events by default, unless:
|
||||
//
|
||||
// - the target element of the event is a link or a form field.
|
||||
// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
|
||||
// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
|
||||
//
|
||||
// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
|
||||
//
|
||||
// This is a problem for us, because we bind a lot of click events as
|
||||
// `document.on('click', '.my-element', …)` – which requires proper bubbling.
|
||||
.ios #wrap {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#wrap::after {
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
|
@ -18,6 +18,20 @@ select {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
// Mobile Safari doesn't bubble mouse events by default, unless:
|
||||
//
|
||||
// - the target element of the event is a link or a form field.
|
||||
// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
|
||||
// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
|
||||
//
|
||||
// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
|
||||
//
|
||||
// This is a problem for us, because we bind a lot of click events as
|
||||
// `document.on('click', '.my-element', …)` – which requires proper bubbling.
|
||||
.ios .page-wrapper {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
DATA = [{
|
||||
sentry: #{raw(sentry_config)}
|
||||
}];
|
||||
%body
|
||||
%body{ class: browser.platform.ios? ? 'ios' : nil }
|
||||
= render partial: 'layouts/outdated_browser_banner'
|
||||
= render partial: 'layouts/pre_maintenance'
|
||||
- if staging?
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
DATA = [{
|
||||
sentry: #{raw(sentry_config)}
|
||||
}];
|
||||
%body
|
||||
%body{ class: browser.platform.ios? ? 'ios' : nil }
|
||||
.page-wrapper
|
||||
= render partial: "layouts/outdated_browser_banner"
|
||||
= render partial: 'layouts/pre_maintenance'
|
||||
|
|
Loading…
Reference in a new issue