Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(compat): resolve modal background scrolling on iOS. #3424

Closed
Benunc opened this issue Jun 29, 2018 · 2 comments

Comments

@Benunc
Copy link
Member

commented Jun 29, 2018

See the issue by following these steps:

  1. use an iPhone (we've tested on iPhone 6)
  2. visit this page: http://donate.sunsetcommunities.org.php72-36.phx1-2.websitetestlink.com/
  3. select any of the modals
  4. scroll down.

Current Behavior

(Slack login required)
https://givewp.slack.com/files/U8MBU7HFX/FBDUS775K/image_from_ios.mp4

Expected Behavior

I expect to be able to scroll all the way to the bottom of the form.

Related

Tasks

  • isolate the issue
  • if it is a bug that makes sense to patch with a woarkaround, do that.
  • if it is something specific to this theme/site, suggest a fix for the customer.

Environment

@kevinwhoffman

This comment has been minimized.

Copy link
Member

commented Jun 29, 2018

@Benunc I think I've found the cause and isolated it to modal forms launched through the form grid in Webkit browsers using touch events.

The issue with iOS background scrolling was solved in #1939, however the solution depends upon the class .give-modal being used. While this class is being used for single modal forms, it does not appear to be used for modal forms launched through the form grid.

Example of .give-modal being used in single modal forms.

image

Example of .give-modal NOT being used in form grid (captured from the above test link)

image

@Sidsector9 Please ensure the .give-modal class is being used when forms are launched from the form grid.

@kevinwhoffman

This comment has been minimized.

Copy link
Member

commented Jun 29, 2018

Temporary fix: add the following CSS to Additional CSS in Customizer:

.mfp-ready {
	-webkit-backface-visibility: hidden;
  	-webkit-overflow-scrolling: touch;
  	-webkit-transform: translateZ(0);
}

This CSS is already part of .give-modal so it will be addressed permanently when this issue closes.

DevinWalker pushed a commit that referenced this issue Jul 3, 2018
Devin Walker
Merge pull request #3430 from WordImpress/issue/3424
fix(compat): resolve modal background scrolling on iOS #3424

@DevinWalker DevinWalker closed this Jul 3, 2018

@raftaar1191 raftaar1191 referenced this issue Jul 12, 2018
33 of 33 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.