WordPress.org

Make WordPress Core

#20805 closed defect (bug) (fixed)

Theme Customizer: Preview should be scrollable on iPad and Kindle Fire

Reported by: koopersmith Owned by: koopersmith
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.

Attachments (13)

IMG_0016.PNG (212.5 KB) - added by azaozz 23 months ago.
IMG_0017.PNG (219.1 KB) - added by azaozz 23 months ago.
IMG_0018.PNG (204.5 KB) - added by azaozz 23 months ago.
IMG_0019.PNG (228.7 KB) - added by azaozz 23 months ago.
customize-preview.dev.js-testing.patch (864 bytes) - added by azaozz 23 months ago.
20805.patch (1.9 KB) - added by azaozz 23 months ago.
20805-2.patch (2.1 KB) - added by azaozz 23 months ago.
20805-3.patch (7.0 KB) - added by azaozz 23 months ago.
20805-4.patch (7.0 KB) - added by azaozz 23 months ago.
20805-5.patch (7.0 KB) - added by azaozz 23 months ago.
20805-6.patch (6.8 KB) - added by azaozz 23 months ago.
20805-7.patch (13.9 KB) - added by koopersmith 23 months ago.
20805.8.diff (15.1 KB) - added by helenyhou 23 months ago.

Download all attachments as: .zip

Change History (38)

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.

comment:5 nacin23 months ago

  • Keywords has-patch needs-refresh needs-testing added; needs-patch removed

azaozz23 months ago

comment:6 azaozz23 months ago

20805.patch adds class "mobile" to the main frame's body. When mobile:

  • set the widths 25% controls, 75% preview iframe to make the layout responsive,
  • make #customize-controls position:fixed,
  • tweak #customize-preview to work with the changed structural css

Still needs a bit of JS to set the preview iframe height to the iframe's body scrollHeight. This needs to happen after each load of the document in the iframe. Would need to push a "DOM ready" or "load" event to the iframe's parent, preferably "load" as all images in the preview will have dimensions then.

Perhaps consider using the 25% / 75% "liquid" layout in all cases, not just for mobile.

comment:7 nacin23 months ago

I should note that without the patch, the customizer works nearly 100% on my Android device. (Android 2.3.6, Mobile Safari build 533.)

Rather than scrolling the two panes separately, it scrolls both together. So if I wanted the collapse link, I'd have to scroll all the way down to the bottom of the page (which could be long with a blog posts page). Very much not the end of the world.

With the patch, "Collapse" is all the way up next to backgrund image — in fact, it overlaps it slightly. It is not anchored to the bottom of the screen, and below the "Collapse" section, the panel is white rather than the gray background. Seems like the frame's height is not being set to 100% (plus other things).

The 25% is a bit thin. However it should be noted that even in landscape mode, the customizer is allowing me to scroll horizontally. So there is probably some mid-width at play here. (Don't get me wrong, this is *good*. I would just rather see a fixed-width sidebar rather than the 25%, and allow it to be collapsed...)

Broken — With or without the #20805.patch and/or #20811.2.patch, there's only one thing I've found to be broken: I can't expand the color controls.

(Also, uploads aren't going through, but I think that may be my device being stupid.)

comment:8 nacin23 months ago

To update: uploads aren't working for any-size file. It allows me to select the file, then nothing happens. This is with the dragdrop uploader (which I shouldn't see). But the fallback browser uploader won't show up when I try to force-disable dragdrop. When I force-display the fallback uploader, I can't click it — it just wants to keep clicking the whole control. So I'm not sure if it's plupload, or what.

comment:9 azaozz23 months ago

Yes, seems we will have to use at least two different "strategies" for mobile devices:

  • For iOS 5 scrolling the preview seems only possible when we force scrolling of the whole page (by setting the iframe height). It also supports position:fixed so the controls are accessible regardless of the scroll position.
  • For Android 2.3 (and Kindle Fire that runs a forked version of 2.3), position:fixed is only supported when the zooming is disabled so the tweaks that work in iOS don't work well. At the same time it wouldn't scroll the preview iframe when loaded with viewport meta: initial-scale=1. A workaround is to set initial-scale=1.01, then it behaves more or less like iOS with forced iframe height, i.e. scrolls the whole page.
  • Android 3+ seems to work well.

For the 25% / 75%, perhaps we can set min-width: 220px or 250px for the controls, that would let then shrink a bit but not get too narrow on smaller screens and expand on larger screens? Or maybe reduce the width to about 250px?

Version 1, edited 23 months ago by azaozz (previous) (next) (diff)

comment:10 azaozz23 months ago

Confirmed uploads not working on Kindle Fire too: when trying to upload a photo stored there no file is being send to the server (also triggers a PHP notice in media.php as $_FILES is empty).

comment:11 follow-up: nacin23 months ago

Perhaps I am going about it the wrong way, but I cannot reproduce any issues with scrolling on the Kindle Fire, regardless of zoom or the desktop/mobile setting.

The entire frame (controls and preview) scrolls together. It is a smooth interaction. Despite the functionality change, I do not see this as an issue, and I actually think it is a bit cleaner on a mobile device.

Also, while it's not the smoothest interaction, the color wheels do work.

(iOS 5) It also supports position:fixed so the controls are accessible regardless of the scroll position.

That doesn't work when the controls are taller than the viewport — which is going to happen on mobile devices. And juggling position: fixed based on the height of the controls is not fun.

And so I ask: What are we actually trying to solve here? We need to make things "not broken". That's it. So, what's left?

comment:12 in reply to: ↑ 11 azaozz23 months ago

Replying to nacin:

Perhaps I am going about it the wrong way, but I cannot reproduce any issues with scrolling on the Kindle Fire...

No, not the wrong way. It's inconsistent. If the preview is wide enough to require horizontal scrolling, i.e. the theme is not "responsive", the vertical scrolling works too. However if the preview is for a responsive theme like Twenty Eleven, the theme switches to supporting the device so no horizontal scrolling is needed and vertical scrolling doesn't work. Same thing happens when the device is in landscape mode.

comment:13 nacin23 months ago

I was testing with Twenty Eleven in portrait mode.

azaozz23 months ago

comment:14 azaozz23 months ago

With 20805-2.patch iPad and Kindle Fire seem to work more or less with one problem: the customizer has to be reloaded after it loads for the first time. Seems the settings in viewport meta and the css for iOS aren't applied on the first load although they are present.

azaozz23 months ago

comment:15 azaozz23 months ago

20805-3.patch includes 2.patch plus:

  • tweaks the controls html and css to show either the upload drop-zone or the Select File button without changing the dom node,
  • loads customize.php directly instead of in an iframe on mobile devices (fixes the need to reload),
  • passes 'is_mobile' and 'is_ios' to JS in _wpCustomizeSettings.

The only thing remaining is whether to show Header Image and Background Image sections in iOS only when there's defaults that can be selected or not show them at all (files cannot be uploaded there).

azaozz23 months ago

comment:16 azaozz23 months ago

Removing the div.upload-fallback (in 3.patch) stops IE from uploading properly, added it back.

comment:17 follow-up: koopersmith23 months ago

I have a few tweaks I'd like to add, and think I may have come across a method that fixes some of the zooming issues on iOS. Still need to fix the additional height added to the page when refreshing on iOS (with the patch).

azaozz23 months ago

comment:18 azaozz23 months ago

20805-5.patch:

  • iOS: in the uploader show the same error/fallback message as in the media library uploader ('The web browser on your device cannot be used to upload files...).
  • Remove changes to div.upload-dropzone (no need to change translatable strings there).
  • Better switching off drag-drop on mobile devices.

comment:19 in reply to: ↑ 17 azaozz23 months ago

Replying to koopersmith:

...Still need to fix the additional height added to the page when refreshing on iOS (with the patch).

Had a look at this couple of days ago too. The problem is that Safari (not just mobile) never shrinks the body when the height changes. Thinking it's an acceptable edge-case / tradeoff for now and hopefully would be fixed in future versions of Safari.

Last edited 23 months ago by azaozz (previous) (diff)

azaozz23 months ago

comment:20 azaozz23 months ago

Changed in 6.patch:

  • removed changes to wp-plupload.dev.js
  • we can control whether to show the dropzone from customize-controls.dev.js by removing the element.

Changes in customize-controls.dev.js

 			}, this.uploader || {} );
 
+			if ( ! this.uploader.browser.length )
+				return;
+
+			if ( api.settings.is_mobile )
+				this.uploader.dropzone = null;
+
 			this.uploader = new wp.Uploader( this.uploader );

koopersmith23 months ago

comment:21 koopersmith23 months ago

  • Keywords needs-refresh removed

Off the top of my head...

Patch moves scrollbar back to fixed positioning, allowing size to be easily adjusted (via CSS or JS). Does not require custom sizes/parameters for iOS besides relative positioning.

Limits viewport zoom to 1.2, which prevents iOS from hiding and slowly scrolling sidebar UIs.

Adds touch overflow scrolling to the sidebar UI in iOS.

Moves upload support and mobile checks for drag and drop to wp.Uploader.

Fixes bug where patch would disable "remove image".

comment:22 koopersmith23 months ago

Ahh! Patch may require some RTL fixes.

comment:23 azaozz23 months ago

7.patch looks good. Yes, rtl needs couple changes, the rest works well.

helenyhou23 months ago

comment:24 azaozz23 months ago

  • Keywords commit added; needs-testing removed

8.diff looks good in rtl here.

comment:25 koopersmith23 months ago

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

In [21014]:

Theme Customizer: Fix scrolling on iOS and Kindle Fire. props azaozz, helenyhou. fixes #20805.

Also fixes uploader UIs on iOS and Kindle Fire by improving wp.Uploader.
Adds mobile viewport specifications.
Moves scrollbar back to fixed positioning.

Note: See TracTickets for help on using tickets.