DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Fix event bubbling on Mobile Safari

Browse source
This commit is contained in:
Paul Chavard 2018-09-12 16:42:04 +02:00
parent 4e17493db9
commit bfe7240235
4 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/assets/stylesheets/application.scss
View file

@ -83,6 +83,20 @@ form {
overflow: hidden; 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 { #wrap::after {
content: ""; content: "";
display: block; display: block;

14
app/assets/stylesheets/new_design/common.scss
View file

@ -18,6 +18,20 @@ select {
min-height: 100%; 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 { h1 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;

2
app/views/layouts/application.html.haml
View file

@ -20,7 +20,7 @@
DATA = [{ DATA = [{
sentry: #{raw(sentry_config)} sentry: #{raw(sentry_config)}
}]; }];
%body %body{ class: browser.platform.ios? ? 'ios' : nil }
= render partial: 'layouts/outdated_browser_banner' = render partial: 'layouts/outdated_browser_banner'
= render partial: 'layouts/pre_maintenance' = render partial: 'layouts/pre_maintenance'
- if staging? - if staging?

2
app/views/layouts/new_application.html.haml
View file

@ -25,7 +25,7 @@
DATA = [{ DATA = [{
sentry: #{raw(sentry_config)} sentry: #{raw(sentry_config)}
}]; }];
%body %body{ class: browser.platform.ios? ? 'ios' : nil }
.page-wrapper .page-wrapper
= render partial: "layouts/outdated_browser_banner" = render partial: "layouts/outdated_browser_banner"
= render partial: 'layouts/pre_maintenance' = render partial: 'layouts/pre_maintenance'