WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#24192 closed defect (bug) (fixed)

Twenty Thirteen: search sometimes overlaps menu items in navbar in older versions of Safari and Android

Reported by: jrbeilke Owned by: lancewillett
Milestone: 4.0 Priority: low
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

Testing Twenty Thirteen with the theme unit test data and I'm having an issue where the search icon overlaps the menu items in Safari.

Attachments (2)

twentythirteen-menuoverlap.jpg (99.7 KB) - added by jrbeilke 5 years ago.
twentythirteen-menuoverlap-ie7.jpg (156.3 KB) - added by jrbeilke 5 years ago.
search overlapping navbar in IE7

Download all attachments as: .zip

Change History (19)

#1 @lancewillett
5 years ago

Could you post the following helpful info:

  • With viewport size(s) does it occur?
  • A test URL to repeat the issue (in case we can't see it in our tests)

@jrbeilke
5 years ago

search overlapping navbar in IE7

#2 @jrbeilke
5 years ago

Here you go:

  • any viewport size where the navbar can extend under search (first attached screenshot is 1125px and second is 1160px)
  • have 3.6 beta with twenty thirteen and unit test data on my sandbox at: http://sandbox.jbdesignandphoto.com/

I've tested multiple versions of IE, Chrome, Firefox and Safari for this issue and I've only been able to reproduce it with Safari and IE7 so far.

#3 @lancewillett
5 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.6
  • Summary changed from Twenty Thirteen: search overlaps menu items in navbar to Twenty Thirteen: search sometimes overlaps menu items in navbar in Safari

#4 @kwight
5 years ago

I'm unable to replicate on Safari, not on stock local install nor the sandbox link mentioned above.

#5 @lancewillett
5 years ago

  • Keywords reporter-feedback added

I also cannot repeat.

#6 follow-up: @rdall
5 years ago

Ok I was able to repeat the error here are the details:

Site:
http://sandbox.robertdall.com/

  • Add Multiple Menu Items 20 plus.
  • Safari on Windows 7 Version 5.1.7

See Screenshot http://cl.ly/image/000V0Y1A3h10

Synopsis

You can't see it on Theme busters because there isn't that many menu items. But in the Windows Safari the search bar floats left instead of right before opening. But I wasn't able to recreate this issue on any other browser on both Mac or PC environments.

The search bar IE 7 the search Bar just stays open. http://cl.ly/image/3C1k2J3S3Q45

I can't add extra menu items to the Theme busters site… But I am guessing that it might replicate once you do..

Considering there is a very small market share for IE7 and Apple hasn't updated Safari for over a year now. I am putting my two cents behind not fixing.

#7 in reply to: ↑ 6 @lancewillett
5 years ago

Replying to rdall:

Ok I was able to repeat the error here are the details:

  • Safari on Windows 7 Version 5.1.7

Oh, Safari on OS X is not affected?

#8 @lancewillett
5 years ago

  • Keywords needs-patch reporter-feedback removed
  • Summary changed from Twenty Thirteen: search sometimes overlaps menu items in navbar in Safari to Twenty Thirteen: search sometimes overlaps menu items in navbar in older versions of Safari

#9 @jrbeilke
5 years ago

Yep I can confirm Safari 5.1.7 (Mac OS X 10.6.8) is giving me the problem here.

I believe Safari 5.X was the last release for Safari on Windows, as well as the last available release for Mac OS X Leopard/Snow Leopard and bundled with some editions of Lion.

What I'm seeing is that these older versions of Safari are rendering the .searchform with a larger width that seems to take the input field size into consideration (.searchform is 34px wide on Firefox and 191px wide on Safari 5.X).

#10 @lancewillett
5 years ago

  • Keywords needs-patch added

If someone wants to take a shot at a patch, I'd be happy to test and consider it. However, seems edge case and probably not worth spending too much time on.

#11 @lancewillett
5 years ago

  • Priority changed from normal to low

#12 @lancewillett
5 years ago

  • Keywords needs-patch removed
  • Milestone 3.6 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Discussed today in Twenty Thirteen office hours, we agreed to close as "wontfix."

#13 @lancewillett
4 years ago

#24698 was marked as a duplicate.

#14 @iljoja
4 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened
  • Summary changed from Twenty Thirteen: search sometimes overlaps menu items in navbar in older versions of Safari to Twenty Thirteen: search sometimes overlaps menu items in navbar in older versions of Safari and Android

It seems that at least some versions of the stock Android browser can't handle the idea of zero width.

Try in CSS:

.site-header .search-field {
	width: 1px;
}

Fixed for me...

#15 @SergeyBiryukov
4 years ago

  • Milestone set to Awaiting Review

#16 @lancewillett
4 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.0

Let's try the 1px width technique, see how it works in testing in all browsers and devices.

#17 @lancewillett
4 years ago

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

In 28662:

Twenty Thirteen: fix layout issue with search form in older versions of Safari and Android. Fixes #24192, props iljoja.

Note: See TracTickets for help on using tickets.