Customizer mousewheel scrolling issue in Safari on Mac

[Martin Snajdr]

I think there is a Customizer scrolling bug in Safari when you change some settings (for example when adding a widget). After you add a widget, the site preview is not scrollable until you resize the window. I tested the same thing in Chrome on mac and it works properly there.

My configuration:
macOS Sierra 10.12
Safari 10.0
Wordpress 4.6.1

[westonruter]

I can reproduce the problem in Safari 9.1.3 on El Capitan.

1. Load customizer.
2. Use scrollwheel to scroll down the page successfully.
3. Click on a link in the customizer preview to navigate somewhere else on the site (or enter wp.customize.previewer.refresh() in the console, or update a control for a setting that uses the refresh transport).
4. Try to use the scrollwheel and notice that scrolling no longer occurs.

Nevertheless, at point 4 scrolling can still be done if you click the scrollbar on the right to scroll down, or if you resize the window.

For some reason, scroll events aren't getting triggered on the iframe after a refresh. Note that when the customizer does do a refresh or a page navigation, it loads the new page in the background in a secondary iframe, and when it finishes loading it removes the previous iframe to reveal the new iframe behind. So there seems to be some issue in Safari with the new iframe not being fully exposed yet for clicks.

I tried checking out WP 4.5 and the issue was still present there, so it may be a new bug in Safari itself.

[tristangemus]

By removing the absolute positioning from the iframe itself, the issue seems to be solved. Unable to produce any issues after removing that rule.

[westonruter]

@tristangemus thanks for looking into this. The position:absolute property was added in [36532] as part of the device previewing functionality. I can confirm that removing this property seems to fix the scrolling in in the desktop customizer view. However, I noticed if I resized the window down to a mobile breakpoint and reloaded, the customizer preview iframe would fail to scroll with the “mousewheel” after navigation there as well.

I did a bit of googling and I came across this somewhat astounding fix that fixes the issue in both the desktop and mobile views: ​http://stackoverflow.com/a/28696563/93579

For some reason adding an empty onmousewheel attribute on the iframe causes Safari to recognize mousewheel scrolling on the iframe. Would you give 38149.2.diff​ a try?

[tristangemus]

Replying to westonruter:

@tristangemus thanks for looking into this. The position:absolute property was added in [36532] as part of the device previewing functionality. I can confirm that removing this property seems to fix the scrolling in in the desktop customizer view. However, I noticed if I resized the window down to a mobile breakpoint and reloaded, the customizer preview iframe would fail to scroll with the “mousewheel” after navigation there as well.

I did a bit of googling and I came across this somewhat astounding fix that fixes the issue in both the desktop and mobile views: ​http://stackoverflow.com/a/28696563/93579

For some reason adding an empty onmousewheel attribute on the iframe causes Safari to recognize mousewheel scrolling on the iframe. Would you give 38149.2.diff​ a try?

Thanks @westonruter, I can confirm that your solution is working.

[westonruter]

In 38742:

Customize: Add workaround for Safari bug causing preview frame to be unscrollable via mousewheel after a refresh.

Props westonruter, tristangemus.
Fixes #38149.