Sweetalert2: iOS, Safari: document scrolling isn't prevented when a modal is shown

Created on 12 Oct 2018  路  21Comments  路  Source: sweetalert2/sweetalert2

Actual: It's possible to scroll the document under the modal backdrop

Expected: the scrolling isn't possible, because overflow-y: hidden on <body>

iOS released bug
Source
picture limonte

All 21 comments

https://stackoverflow.com/q/52786341/1331425

limonte picture limonte on 12 Oct 2018

:tada: This issue has been resolved in version 7.28.6 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

limonte picture limonte on 18 Oct 2018

Unfortunately, this didn't fix iOS :(

limonte picture limonte on 19 Oct 2018

See this lib for implementation, it locks body scroll for a scrolling modal container on iOS etc, cross-browser: https://github.com/willmcpo/body-scroll-lock

atomiks picture atomiks on 30 Oct 2018

See this lib for implementation, it locks body scroll for a scrolling modal container on iOS etc, cross-browser: https://github.com/willmcpo/body-scroll-lock

Not really, https://github.com/willmcpo/body-scroll-lock/issues/39

limonte picture limonte on 30 Oct 2018

I'm using version 7.33.1 on chrome, and still able to scroll body behind the swal modal

kwagdy picture kwagdy on 13 Mar 2019

Hi @kwagdy, is your problem with Chrome on IOS?

gverni picture gverni on 13 Mar 2019

Hi @kwagdy, is your problem with Chrome on IOS?

Hello @gverni, yeah, Chrome 72 on MacBook laptop

kwagdy picture kwagdy on 13 Mar 2019

Thanks @kwagdy, I tried with the examples on https://sweetalert2.github.io/ on Chrome 72 on a macbook, but I wasn't able to scroll the body (I used the mouse's scroll wheel). Do you have a live example that shows that? Or maybe a screen recording? (you can use extension like this for that)

gverni picture gverni on 13 Mar 2019

sure...
bg_scroll

kwagdy picture kwagdy on 13 Mar 2019

Hello @kwagdy and thank you for proving the screen recording!

I have the offtopic question regarding the screen recording above. As I understand correctly, it's the Arabic language there which is RTL. Should the question icon contain 責 instead of ? for Arabic language?

limonte picture limonte on 13 Mar 2019

Hello @kwagdy and thank you for proving the screen recording!

I have the offtopic question regarding the screen recording above. As I understand correctly, it's the Arabic language there which is RTL. Should the question icon contain 責 instead of ? for Arabic language?

Hi @limonte , you're right on both your notes, this is an Arabic RTL web app, and yes, I should find a way to flip the question mark!

kwagdy picture kwagdy on 13 Mar 2019

@kwagdy can you confirm whether you see the same on any of the example on https://sweetalert2.github.io/? If not, any chance you can share a live example of your page (or an extract of that)?

gverni picture gverni on 13 Mar 2019

It is not reproducable on the github page! Is there a way to message you a link to the test page?
For the record, I have the webpage display divided to two sections, menu (nav) and body (main). For some reason I have set the main body position to absolute (I am trying to remember why 馃...!) when position:absolute is removed from main body the behavior is now correct, no scrolling happens when swal is opened!

kwagdy picture kwagdy on 13 Mar 2019

Thanks @kwagdy, let me do some test with the position and get back to you

gverni picture gverni on 13 Mar 2019

Hi @kwagdy I tried setting the body position to absolute but I cannot see that. I created this _gltich_:

https://swal2-body-absolute.glitch.me/

Feel free to _remix_ this glitch until it reproduces the issue for you.

gverni picture gverni on 14 Mar 2019
👍1

this is an Arabic RTL web app, and yes, I should find a way to flip the question mark!

@kwagdy the proper way to flip the question mark is upcoming, see #1443 for the details.

limonte picture limonte on 14 Mar 2019
👍1

@limonte Found the problem! See here https://beautiful-notebook.glitch.me/ for some reason I added this class

body.swal2-height-auto {
  overflow-y: visible !important;
  height: 100% !important;
}

I am not quite sure what was the reason behind this, but this combined with position absolute in the containing div, made the background page scrollable.

Thank you the flip question mark link 馃憤

kwagdy picture kwagdy on 18 Mar 2019

Hm, the fix looks "dirty" to me. @kwagdy Did you try setting heightAuto parameter to false?

limonte picture limonte on 18 Mar 2019

@limonte I'm almost certain I added it to fix an interim issue, just can't remember what :thinking: ! Anyway, I removed it, along with position absolute for the main area. Things seems to be in order now. Thanks a lot for following up on this :smiley:

kwagdy picture kwagdy on 19 Mar 2019

:tada: This issue has been resolved in version 8.11.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

limonte picture limonte on 22 May 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kenvernaillenvub picture kenvernaillenvub  路  20Comments
limonte picture limonte  路  19Comments
limonte picture limonte  路  21Comments
acupofjose picture acupofjose  路  20Comments
S-Hodgson-MMOARgames picture S-Hodgson-MMOARgames  路  17Comments