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

[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.

[johnjamesjacoby]

iPhone iOS 5 - No Zoom

[johnjamesjacoby]

iPhone iOS 5 - Partial Zoom

[johnjamesjacoby]

iPhone iOS 5 - Full Zoom

[johnjamesjacoby]

iPad iOS 5 - No Zoom

[johnjamesjacoby]

iPad iOS 5 - Partial Zoom

[johnjamesjacoby]

iPad iOS 5 - More Zoom

[johnjamesjacoby]

iPad iOS 5 - Partial Zoom + Scrolled to Bottom

[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.

[johnjamesjacoby]

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.

[Ipstenu]

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

[nacin]

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

[georgestephanis]

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.

[georgestephanis]

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.

[azaozz]

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).

[georgestephanis]

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

[georgestephanis]

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

[georgestephanis]

This time accounting for the border on the user menu.

[ocean90]

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

[azaozz]

In [19338]:

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