Twenty Fourteen: device and browser testing

[lancewillett]

Add screenshots and notes here for bugs you find on mobile, tablets, and other devices.

Including but not limited to:

Devices and OSs:
Android, iOS, Kindle, Firefox OS

Browsers:
IE 7, 8, 9, 10
Chrome
Safari
Firefox
Opera

[chellycat]

View of non-breaking title in iOS7 on an iPhone

[chellycat]

Non-breaking title in the "Next Posts" link.

[chellycat]

This is edge case, but long, non-breaking titles can break the layout on smaller screens. Screenshots show how it appears in iOS7. Seen here: ​http://themebreaker.wordpress.net/2009/10/edge-case-non-breaking-text/

Suggested fix would be to add word-wrapping for smaller screens only?

[sixhours]

Gap between tag link and triangle on iPad Mini

[sixhours]

On an iPad Mini running iOS 7.0.4, tags have a 1px gap between the beginning triangle and the tag link, see attachment:
​http://core.trac.wordpress.org/attachment/ticket/26189/IMG_0001.PNG

[iv.dimova]

Tested on HTC Desire C, Android Version 4.0.3., HTC Sense Version 4.0, it looks good.

[jartes]

If the last primary menu item has more than one level, the second level doesn't show in 1280x768 resolutions. Tested on a 13 inches MacBook Pro with the default resolution,

[jartes]

On iPhone Retina iOS 7 the submit button to see a private post goes down. Maybe needs some margin

[erichmond]

Footer doesn't fit to the bottom of the Safari browser

[erichmond]

Windows XPIE 7.01280 x 1024

[erichmond]

menu missing on home page Windows XPIE 7.01280 x 1024

[amistad18]

menu over site title

[amistad18]

There is no space between category (over post title) and header. Also there is no space between widget title top border, and header.

[iamtakashi]

FYI, Twenty Fourteen won't look like it on other newer browsers and that's intentional. I've styled it for IE7 just to be readable and navigate-able. The primary navigation on IE7 works in the same way as mobile navigation.

[iamtakashi]

Replying to chellycat:

This is edge case, but long, non-breaking titles can break the layout on smaller screens.

For this issue, see the discussion on ​this ticket

[iamtakashi]

Make sure non-breaking title in .nav-links to not to overflow.

[amistad18]

I found out that if menu is wide enough, then it's over a site title because of -10px as a left margin for #primary-navigation.

Also "no space" problem from screen 2014_2.jpg appears only on resolutions 782px to 846px. Cause in lover resolution menu is hidden, and in higher resolution there is such code:

@media screen and (min-width: 846px) {
	.content-area,
	.content-sidebar {
		padding-top: 72px;
	}
}

But anyway, because it is fixed value of padding-top, it won't work again if someone will have menu items in 2 rows, or 3 rows. By default it displays all pages, so it may be a common issue if someone don't have custom menu.

[amistad18]

Header over content if there is too much items in menu

[sixhours]

Is this gap between search and highlighted menu item (hover state) intentional?

[chellycat]

Replying to sixhours:

On an iPad Mini running iOS 7.0.4, tags have a 1px gap between the beginning triangle and the tag link

I'm also seeing a gap in the same place in Firefox 25.0.1 on my regular Mac: ​http://core.trac.wordpress.org/attachment/ticket/26189/Screen%20Shot%202013-11-24%20at%2012.38.09%20PM.png

I don't see this occurring in Chrome or Safari.

[chellycat]

Text displaying along with main menu hamburger genericon

[chellycat]

On the Kindle Experimental Browser (I tested with the Kindle Paperwhite, 2013 Edition), the "Primary Menu" text on the Main Menu appears along with the hamburger menu Genericon: ​http://core.trac.wordpress.org/attachment/ticket/26189/photo.JPG

[cainm]

Switch submenu of primary navigation items to open towards the left.

[cainm]

If the last primary menu item has more than one level, the second level doesn't show in 1280x768 resolutions. Tested on a 13 inches MacBook Pro with the default resolution

@iamtakashi, @thomasguillot, and I think that the worse problem is that the first submenu items get cut off. In 26189.2.diff​ we floated the submenu items of the primary navigation toward the left to match the design of the search bar toggle. This also includes the necessary RTL.

[cainm]

Replying to cainm:

If the last primary menu item has more than one level, the second level doesn't show in 1280x768 resolutions. Tested on a 13 inches MacBook Pro with the default resolution

@iamtakashi, @thomasguillot, and I think that the worse problem is that the first submenu items get cut off. In 26189.2.diff​ we floated the submenu items of the primary navigation toward the left to match the design of the search bar toggle. This also includes the necessary RTL.

Alternatively, we can keep the navigation as it currently is, and keep the negative space to the right of the page even at smaller screen resolutions greater than the first breakpoint. This would both allow the first submenu to be seen and solve the issue of not seeing the background color at screen resolutions greater than the first breakpoint.

I'd propose a 100px negative space. Also noting that we'd need to update breakpoints with that amount since the content area would begin to decrease earlier.

[celloexpressions]

Genericons don't work in IE9 Mobile. (screen picture - no screenshots in WP 7)

[celloexpressions]

Issue in IE10 Mobile (only happens when switching from portrait to landscape)

[celloexpressions]

Tested the following:

IE 9 Mobile (Windows Phone 7.5)

• Surprisingly, only one issue: no Genericons. We might want to consider adding fallbacks for the menu and search icons; I think the others are non-essential. In Twenty Thirteen the search icon was a png at least, and we had more colors to deal with (#23985).
• Swiping to advance slider doesn't work, but buttons do, so acceptable degradation.

Windows-Phone-7.5-no-Genericons.jpg​

IE 10 Mobile (Windows Phone 8)

• When featured content slider is in use, impossible to scroll down the homepage in landscape mode (swiping up and down moves the slider, but doesn't scroll and the slider and header fill the entire screen). Can sometimes get past it by pulling down, then quickly up on the header area and relying on kinetic scrolling.
• It takes a very particular technique to avoid the link being activated instead of activating the slider when swiping left/right on the homepage featured content area. The link is almost always activated instead.
• Slider current-item indicators overflow after switching from portrait to landscape mode (device resolution 480x800px, CSS resolution unknown):

Windows-Phone-8-Landscape-slider-overflow.png​

IE 11 "Immersive" (Windows 8.1)

• Same slider interaction issue as above -- swiping results in triggering the link unless you go super slow.
• Touch targets are generally good, but I consistently have trouble with the category links. I think we need to either add some more spacing or bump the font size there to optimize the experience for touch users (literally everywhere else was good).

[cainm]

Add 100px negative space to right side to provide for first submenu in primary navigation on smaller desktop resolutions

[iamtakashi]

​The gap between the triangle and the tag link on iPad seems to appear only it's viewed in landscape mode or zoomed-in. This makes me think this could a bug on webkit rendering engine and I don't think there is nothing we can really do about it because we want to keep letting users zoom-in if they want. If anybody know an elegant solution, please let me know.

I can't replicate it on Firefox as reported in ​here.

[iamtakashi]

Replying to amistad18:

I found out that if menu is wide enough, then it's over a site title because of -10px as a left margin for #primary-navigation.

We need the negative margin in order to make menu items to be aligned with the site title when there are so many items like ​this. But we are removing the black background color with ​this patch so that site title won't be cut-off when the patch gets committed.

But anyway, because it is fixed value of padding-top, it won't work again if someone will have menu items in 2 rows, or 3 rows. By default it displays all pages, so it may be a common issue if someone don't have custom menu.

This is also fine, it only occurs when we resize the browser window. The fixed header will be unfixed If the header is taller than 48px when a page is loaded so everything pushed down.

[iamtakashi]

@sixhours

Is this gap between search and highlighted menu item (hover state) intentional?

Yes. That gap is meant to separate the last menu item and search.

[iamtakashi]

Make sure the menu toggle text is hidden.

[iamtakashi]

Replying to chellycat:

On the Kindle Experimental Browser (I tested with the Kindle Paperwhite, 2013 Edition), the "Primary Menu" text on the Main Menu appears along with the hamburger menu Genericon: ​http://core.trac.wordpress.org/attachment/ticket/26189/photo.JPG

in ​26189.4.diff Make sure the menu toggle text is hidden in the Kindle Browsers.

[lancewillett]

In 26558:

Twenty Fourteen: make sure non-breaking title in .nav-links doesn't overflow, and make sure the menu toggle text is hidden. Props iamtakashi, closes #26189.

[lancewillett]

In 26661:

Twenty Fourteen: partial revert of r26558 to avoid blocking access to the Menu Toggle in IE when in small viewports. See #26189 and #26379.