WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#26189 closed defect (bug) (fixed)

Twenty Fourteen: device and browser testing

Reported by: lancewillett Owned by: lancewillett
Milestone: 3.8 Priority: high
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

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

Attachments (20)

non-breaking-title-ios7.png (68.4 KB) - added by chellycat 5 months ago.
View of non-breaking title in iOS7 on an iPhone
non-breaking-ttile-2-ios7.png (78.9 KB) - added by chellycat 5 months ago.
Non-breaking title in the "Next Posts" link.
IMG_0001.PNG (76.9 KB) - added by sixhours 5 months ago.
Gap between tag link and triangle on iPad Mini
Captura de pantalla 2013-11-24 a la(s) 12.42.13.png (2.0 MB) - added by jartes 5 months ago.
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,
Private Post - iPhone.png (379.0 KB) - added by jartes 5 months ago.
On iPhone Retina iOS 7 the submit button to see a private post goes down. Maybe needs some margin
Screen shot 2013-11-24 at 13.13.15.png (55.9 KB) - added by erichmond 5 months ago.
Footer doesn't fit to the bottom of the Safari browser
Screen shot 2013-11-24 at 13.28.44.png (63.2 KB) - added by erichmond 5 months ago.
Windows XPIE 7.01280 x 1024
Screen shot 2013-11-24 at 13.31.55.png (246.4 KB) - added by erichmond 5 months ago.
menu missing on home page Windows XPIE 7.01280 x 1024
2014_1.jpg (133.1 KB) - added by amistad18 5 months ago.
menu over site title
2014_2.jpg (132.5 KB) - added by amistad18 5 months ago.
There is no space between category (over post title) and header. Also there is no space between widget title top border, and header.
26189.1.diff (481 bytes) - added by iamtakashi 5 months ago.
Make sure non-breaking title in .nav-links to not to overflow.
2014_3.jpg (76.6 KB) - added by amistad18 5 months ago.
Header over content if there is too much items in menu
Voila_Capture665.png (16.3 KB) - added by sixhours 5 months ago.
Is this gap between search and highlighted menu item (hover state) intentional?
Screen Shot 2013-11-24 at 12.38.09 PM.png (19.7 KB) - added by chellycat 5 months ago.
photo.JPG (1.3 MB) - added by chellycat 5 months ago.
Text displaying along with main menu hamburger genericon
26189.2.diff (1.0 KB) - added by cainm 5 months ago.
Switch submenu of primary navigation items to open towards the left.
Windows-Phone-7.5-no-Genericons.jpg (187.8 KB) - added by celloexpressions 5 months ago.
Genericons don't work in IE9 Mobile. (screen picture - no screenshots in WP 7)
Windows-Phone-8-Landscape-slider-overflow.png (37.9 KB) - added by celloexpressions 5 months ago.
Issue in IE10 Mobile (only happens when switching from portrait to landscape)
26189.3.diff (838 bytes) - added by cainm 5 months ago.
Add 100px negative space to right side to provide for first submenu in primary navigation on smaller desktop resolutions
26189.4.diff (979 bytes) - added by iamtakashi 5 months ago.
Make sure the menu toggle text is hidden.

Change History (39)

comment:1 lancewillett5 months ago

  • Priority changed from normal to high

chellycat5 months ago

View of non-breaking title in iOS7 on an iPhone

chellycat5 months ago

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

comment:2 follow-up: chellycat5 months ago

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/

View of non-breaking title in iOS7 on an iPhone

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

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

Last edited 5 months ago by chellycat (previous) (diff)

sixhours5 months ago

Gap between tag link and triangle on iPad Mini

comment:3 follow-up: sixhours5 months ago

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

comment:4 iv.dimova5 months ago

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

jartes5 months ago

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,

jartes5 months ago

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

erichmond5 months ago

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

erichmond5 months ago

Windows XPIE 7.01280 x 1024

erichmond5 months ago

menu missing on home page Windows XPIE 7.01280 x 1024

amistad185 months ago

menu over site title

amistad185 months ago

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

comment:5 iamtakashi5 months ago

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.

comment:6 in reply to: ↑ 2 iamtakashi5 months ago

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

iamtakashi5 months ago

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

comment:7 follow-up: amistad185 months ago

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.

amistad185 months ago

Header over content if there is too much items in menu

sixhours5 months ago

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

comment:8 in reply to: ↑ 3 chellycat5 months ago

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.

chellycat5 months ago

Text displaying along with main menu hamburger genericon

comment:9 follow-up: chellycat5 months ago

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

cainm5 months ago

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

comment:10 follow-up: cainm5 months ago

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.

comment:11 in reply to: ↑ 10 cainm5 months ago

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.

celloexpressions5 months ago

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

celloexpressions5 months ago

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

comment:12 celloexpressions5 months ago

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

cainm5 months ago

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

comment:13 iamtakashi5 months ago

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.

comment:14 in reply to: ↑ 7 iamtakashi5 months ago

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.

comment:15 iamtakashi5 months ago

  • Cc takashi@… added

comment:16 iamtakashi5 months ago

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

iamtakashi5 months ago

Make sure the menu toggle text is hidden.

comment:17 in reply to: ↑ 9 iamtakashi5 months ago

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.

comment:18 lancewillett4 months ago

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

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.

comment:19 lancewillett4 months ago

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.

Note: See TracTickets for help on using tickets.