Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#59529 new defect (bug)

Twenty Fourteen: Search bar showing on different line on iPadOS 17

Reported by: foosantos's profile foosantos Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version:
Component: Bundled Theme Keywords: needs-patch has-screenshots
Focuses: Cc:

Description (last modified by sabernhardt)

The search toggle element doesn't show on the same level as the menu for iPadOS 17 devices — that is both when checking on Chrome and Safari.

  1. Get a device with iPadOS 16 and reproduce it showing as expected: https://wp-themes.com/twentyfourteen/
  2. Update to iPadOS 17 and see the issue with the search on Safari or Chrome

PS: I'm considering this major severity as the issue is on an important part of a default theme — even if it's an old theme and we can only reproduce on IOS 17 devices.

Originally reported by @fgruen here: https://wordpress.org/support/topic/display-problem-with-search-box-on-apple-ipad/?view=all

Attachments (2)

image-before.png (59.3 KB) - added by foosantos 5 months ago.
iPadOS 16 (before)
image-after.png (116.6 KB) - added by foosantos 5 months ago.
iPadOS 17 (after)

Download all attachments as: .zip

Change History (5)

@foosantos
5 months ago

iPadOS 16 (before)

@foosantos
5 months ago

iPadOS 17 (after)

#1 @foosantos
5 months ago

Actually, just clarifying a bit more what I said: The search element shows on a different line (instead of showing with the menu) for iPadOS 17.

#2 @sabernhardt
5 months ago

  • Description modified (diff)
  • Summary changed from [Twenty Fourteen] Search bar showing on different line on iPadOS 17 to Twenty Fourteen: Search bar showing on different line on iPadOS 17

Thanks for the report!

I did a quick test in BrowserStack and confirmed that iPadOS 17 Beta put the menu items below the search toggle in both iPad 7th and iPad Pro 12.9 2021. The header even had two rows when I rotated it to the wider orientation. However, changing the toggle from floating right to absolute positioning did not seem to improve the layout. Maybe the menu needs to specify width: auto (or something less predictable such as a z-index).

Considering that the same page did not have trouble in version 16, this might be a bug in the OS that Apple fixes in the next few weeks.

#3 @properlypurple
5 months ago

It looks like this is being caused by ios17 Safari treating floats a little differently. Just noting here that if this continues to be an issue, using display:flex for the header might be a nicer fix.

.header-main {
  display: flex;
  justify-content:space-between;
}
.header-main .search-toggle {
  order: 3;
}
.header-main .site-navigation {
  margin-left: auto;
}
Note: See TracTickets for help on using tickets.