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

[Benunc]

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

• https://secure.helpscout.net/conversation/608470750/20619/
• link to duplicator file of the site attached to slack of this issue

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]

@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.

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

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

[kevinwhoffman]

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.