Make WordPress Core

Opened 9 months ago

Closed 5 days ago

#59529 closed defect (bug) (worksforme)

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

Reported by: foosantos's profile foosantos Owned by:
Milestone: Priority: normal
Severity: major Version:
Component: Bundled Theme Keywords: has-screenshots reporter-feedback close
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 9 months ago.
iPadOS 16 (before)
image-after.png (116.6 KB) - added by foosantos 9 months ago.
iPadOS 17 (after)

Download all attachments as: .zip

Change History (10)

@foosantos
9 months ago

iPadOS 16 (before)

@foosantos
9 months ago

iPadOS 17 (after)

#1 @foosantos
9 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
9 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
9 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;
}

#4 @karmatosed
3 months ago

  • Keywords needs-testing added

#5 @karmatosed
3 months ago

  • Keywords needs-testing removed

#6 @karmatosed
6 days ago

  • Keywords reporter-feedback added; needs-patch removed

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.

#7 @karmatosed
6 days ago

  • Keywords close added

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.

#8 @karmatosed
5 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.