WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 7 months ago

#38149 closed defect (bug) (fixed)

Customizer mousewheel scrolling issue in Safari on Mac

Reported by: Martin Snajdr Owned by: westonruter
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, administration Cc:

Description

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

Attachments (2)

patch_38149.diff (64.2 KB) - added by tristangemus 7 months ago.
38149.2.diff (612 bytes) - added by westonruter 7 months ago.

Download all attachments as: .zip

Change History (8)

#1 @westonruter
7 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.7
  • Summary changed from Customizer scrolling issue in Safari on Mac to Customizer mousewheel scrolling issue in Safari on Mac

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.

#2 @tristangemus
7 months ago

  • Keywords has-patch added; needs-patch removed

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
7 months ago

#3 follow-up: @westonruter
7 months ago

  • Keywords needs-testing added
  • Version changed from 4.6.1 to 4.5

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

#4 in reply to: ↑ 3 @tristangemus
7 months ago

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 months ago

#6 @westonruter
7 months ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 38742:

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

Props westonruter, tristangemus.
Fixes #38149.

Note: See TracTickets for help on using tickets.