WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#38396 closed defect (bug) (fixed)

Twenty Seventeen: iPad mini, iPhone 5: Search form and button rendering issues

Reported by: alex27 Owned by: karmatosed
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

  • on iPad mini 2 retina:

No image "//cloud.githubusercontent.com/assets/4550351/19464433/f48bd274-9547-11e6-9ae3-9d8f9f65c7dc.png" attached to (https

  • on iPhone 5S:

https://cloud.githubusercontent.com/assets/4550351/19464498/7ad8542e-9548-11e6-8a74-15a9a4d3c44a.png

Attachments (3)

38396.diff (398 bytes) - added by Caspie 3 years ago.
-webkit-appearance set to none in the CSS fixes it. Tested on iPhone 5s
38396_2.diff (607 bytes) - added by Caspie 3 years ago.
Moving the code outside Normalize
38396.3.patch (499 bytes) - added by davidakennedy 3 years ago.
Remove rounded corners in form inputs on Webkit.

Download all attachments as: .zip

Change History (9)

@Caspie
3 years ago

-webkit-appearance set to none in the CSS fixes it. Tested on iPhone 5s

#1 @Caspie
3 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#2 @davidakennedy
3 years ago

  • Keywords needs-refresh added; has-patch needs-testing removed

Thanks for the patch @Caspie! Your change alters Normalize, the third-party library to reset the CSS. I'd rather not touch that. Twenty Sixteen doesn't have this problem, and the CSS is very similar forms. Could we look at what it's doing and copy that rather than changing Normalize?

#3 @Caspie
3 years ago

Good point @davidakennedy, thanks! Refreshing the patch and moving the fix under 5.0 Forms styling.

@Caspie
3 years ago

Moving the code outside Normalize

#4 @Caspie
3 years ago

  • Keywords has-patch needs-testing added; needs-refresh removed

@davidakennedy
3 years ago

Remove rounded corners in form inputs on Webkit.

#5 @davidakennedy
3 years ago

After some investigation with @laurelfulford, it looks like this rule in Twenty Sixteen prevented the issue:

https://github.com/WordPress/twentysixteen/blob/master/style.css#L647

38396.3.patch adds it to Twenty Seventeen and should be less invasive than some of the other approaches.

#6 @karmatosed
3 years ago

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

In 38888:

Twenty Seventeen: iPad mini, iPhone 5 search form rendering issues fix

On the these devices, there is an issue with the button rendering for the search form. This resolves that.

Props Caspie, alex27, davidakennedy
Fixes #38396

Note: See TracTickets for help on using tickets.