WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#18654 closed defect (bug) (fixed)

Admin Bar in iOS 5 (betas 1-7) behaves unexpectedly

Reported by: johnjamesjacoby Owned by: georgestephanis
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: Toolbar Keywords: ui-feedback has-patch needs-testing
Focuses: Cc:

Description (last modified by johnjamesjacoby)

Changes in MobileSafari in iOS 5 (all betas so far) are causing the Admin Bar to render unexpectedly.

Uploaded screen shots from iOS 5 Beta 7 on both iPhone and iPad. Screen shots were taken from testbp.org, which is running BuddyPress + bbPress. The admin bar pictured, while having modified menus, does not have any non-WP-core CSS that could contribute to this bug.

It appears that iOS 5 obeys fixed positioning rules differently than before. The admin bar is now properly fixed to the top regardless of the window Y position, where if memory serves in iOS 4 it used to remain at the 0px top, unfixed.

The first problem comes when zoomed. The fixed top + left positioning means you can never see the right side of the Admin Bar when zoomed in. The Admin Bar properly zooms and retains the 100% width of the browser window like I would expect it to, I just can never get to it.

The next problem appears when zoomed too. As you scroll down the bottom of the page, the Admin Bar slowly creeps upwards until it is out of view. This happens on both iPhone and iPad.

Attachments (11)

IMG_0841.PNG (123.4 KB) - added by johnjamesjacoby 3 years ago.
iPhone iOS 5 - No Zoom
IMG_0842.PNG (120.5 KB) - added by johnjamesjacoby 3 years ago.
iPhone iOS 5 - Partial Zoom
IMG_0843.PNG (75.8 KB) - added by johnjamesjacoby 3 years ago.
iPhone iOS 5 - Full Zoom
IMG_0018.PNG (163.0 KB) - added by johnjamesjacoby 3 years ago.
iPad iOS 5 - No Zoom
IMG_0019.PNG (128.1 KB) - added by johnjamesjacoby 3 years ago.
iPad iOS 5 - Partial Zoom
IMG_0020.PNG (129.1 KB) - added by johnjamesjacoby 3 years ago.
iPad iOS 5 - More Zoom
IMG_0021.PNG (103.4 KB) - added by johnjamesjacoby 3 years ago.
iPad iOS 5 - Partial Zoom + Scrolled to Bottom
18654.preliminary.diff (1.2 KB) - added by georgestephanis 2 years ago.
18654.diff (961 bytes) - added by georgestephanis 2 years ago.
Tidied it up so I was changing fewer things (which is always good)
18654.with-200-percent-more-rtl.diff (2.5 KB) - added by georgestephanis 2 years ago.
This also makes the admin menu in the admin bar work properly in RTL. And tidies up some CSS whitespace inconsistencies in wp-adminbar-rtl.dev.css
18654.with-201-percent-more-rtl.diff (2.7 KB) - added by georgestephanis 2 years ago.
This time accounting for the border on the user menu.

Download all attachments as: .zip

Change History (22)

johnjamesjacoby3 years ago

iPhone iOS 5 - No Zoom

johnjamesjacoby3 years ago

iPhone iOS 5 - Partial Zoom

johnjamesjacoby3 years ago

iPhone iOS 5 - Full Zoom

johnjamesjacoby3 years ago

iPad iOS 5 - No Zoom

johnjamesjacoby3 years ago

iPad iOS 5 - Partial Zoom

johnjamesjacoby3 years ago

iPad iOS 5 - More Zoom

johnjamesjacoby3 years ago

iPad iOS 5 - Partial Zoom + Scrolled to Bottom

comment:1 johnjamesjacoby3 years ago

  • Description modified (diff)

comment:2 follow-up: ocean903 years ago

  • Keywords ui-feedback removed

Koop is working on a new admin bar, see #18197, we can review this then again.

Also until iOS 5 isn't final we shouldn't *fix* something.

comment:3 johnjamesjacoby3 years ago

  • Description modified (diff)

comment:4 in reply to: ↑ 2 johnjamesjacoby3 years ago

  • Keywords ui-feedback added

Replying to ocean90:

Koop is working on a new admin bar, see #18197, we can review this then again.

Also until iOS 5 isn't final we shouldn't *fix* something.

I was specifically asked (by koop and the UI team) to make this ticket. Putting the ui-feedback tag back.

comment:5 Ipstenu3 years ago

FWIW I see the same weird resizing issues on 3.2 and 3.3 aortic with Chrome.

comment:6 nacin2 years ago

  • Component changed from UI to Admin Bar
  • Milestone changed from Awaiting Review to 3.3
  • Version set to 3.3

Given our Admin Bar and iOS prioritizing for this release, promoting to 3.3.

comment:7 follow-up: georgestephanis2 years ago

  • Owner set to georgestephanis
  • Status changed from new to accepted

If noone else wants to snag this one, I'll pick it up and run with it.

I've been doing a good bit of playing around with fixed positioning in iOS before anyways.

What are we looking at for intended functionality on this? Over 90% of users are often on the latest version for iOS -- but the iPhone 1st gen, iPhone 3G, and first two generations of the iPod Touch actually cannot upgrade beyond 4.2.1

Which leads me to believe it's best to run two methods, one for iOS 5, one for iOS 4 and below. Unless the consensus is to drop support for the older versions.

comment:8 georgestephanis2 years ago

  • Keywords has-patch needs-testing added

Very much a preliminary patch, needs testing, etc. I'll give it a good run through the muck tomorrow -- but it works well for the iPad in my brief run at it.

comment:9 in reply to: ↑ 7 azaozz2 years ago

Replying to georgestephanis:

What are we looking at for intended functionality on this? Over 90% of users are often on the latest version for iOS -- but the iPhone 1st gen, iPhone 3G, and first two generations of the iPod Touch actually cannot upgrade beyond 4.2.1

Currently the admin doesn't scale well for smart phones. There are separate apps/projects for them. So the priority would be iOS 5 on iPads and eventually other tablets (Android).

georgestephanis2 years ago

Tidied it up so I was changing fewer things (which is always good)

georgestephanis2 years ago

This also makes the admin menu in the admin bar work properly in RTL. And tidies up some CSS whitespace inconsistencies in wp-adminbar-rtl.dev.css

georgestephanis2 years ago

This time accounting for the border on the user menu.

comment:10 ocean902 years ago

georgestephanis, can you separate RTL and iOS issues? Leaving this for iOS and #19042 for RTL.

comment:11 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In [19338]:

Fix admin bar in iOS5 iPads, props georgestephanis, fixes #18654

Note: See TracTickets for help on using tickets.