WordPress.org

Make WordPress Core

Opened 23 months ago

Last modified 23 months ago

#20805 closed defect (bug)

Theme Customizer: Preview should be scrollable on iPad and Kindle Fire — at Version 4

Reported by: koopersmith Owned by:
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.4
Component: Appearance Keywords: commit has-patch
Focuses: Cc:

Description (last modified by nacin)

iPad

Currently, the customizer preview iframe is not scrollable on iPads. Originally, Mobile Safari was supposed to scroll iframes with two fingers, but has been broken since at least iOS 4.2.1.

Applying the following to the parent element allows the iframe to scroll with one finger, but will not render any iframe contents that were originally out of the frame when scrolled (it just becomes white). Also, when the preview is refreshed, the iframe stops scrolling altogether.

#customize-preview {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

For more information on this technique, see:
http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content

Kindle Fire

(Originally #20806.) The customizer's preview frame is scrollable on the Kindle Fire... but only if you zoom in first. If the page is fully zoomed out, the viewport is locked.

Change History (9)

azaozz23 months ago

azaozz23 months ago

azaozz23 months ago

azaozz23 months ago

comment:1 azaozz23 months ago

Apart from the scrolling, the customizer looks and works pretty well on iPad (added few screenshots).

comment:2 azaozz23 months ago

Above patch is only for testing support for iOS Safari.

comment:3 nacin23 months ago

If customize-preview.dev.js-testing.patch works, can it be formulated into a proper patch? Does it fix issues in the Kindle Fire (#20806) as well?

comment:4 nacin23 months ago

  • Description modified (diff)
  • Summary changed from Theme Customizer: Preview should be scrollable on iPad to Theme Customizer: Preview should be scrollable on iPad and Kindle Fire

Per azaozz, customize-preview.dev.js-testing.patch does address problems in the Kindle Fire as well.

Note: See TracTickets for help on using tickets.