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

[foosantos]

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

[foosantos]

iPadOS 16 (before)

[foosantos]

iPadOS 17 (after)

[foosantos]

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.

[sabernhardt]

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.

[properlypurple]

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;
}

[karmatosed]

In testing I am no longer seeing this issue. I would love to see if anyone else is able to re-create this or if indeed this is now resolved.

[karmatosed]

As I am unable to replicate this for now suggesting it goes to close, but if someone can replicate we can always reopen or not close.

[karmatosed]

For now, I am going to close this. If someone is able to replicate please add exact steps and we absolutely can reopen. Thank you everyone.