WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#48876 closed defect (bug) (fixed)

Twenty Twenty: High input fields are misaligned in Firefox

Reported by: aljullu's profile aljullu Owned by: ianbelanger's profile ianbelanger
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots good-first-bug has-patch commit fixed-major
Focuses: css Cc:

Description

Steps to reproduce:

  1. Create a post and add a Custom HTML block.
  2. Add this code: 
    <input type="text" style="height: 120px;" placeholder="Test" />
  3. Preview it and notice the placeholder appears too high in Firefox.

That's caused by these lines in the theme CSS:

​https://github.com/WordPress/twentytwenty/blob/master/style.css#L769-L779

Attachments (2)

Screenshot from 2019-12-04 14-49-56.png​ (2.7 KB) - added by aljullu 5 years ago.
Left: Firefox / Right: Chrome
48876.patch​ (538 bytes) - added by subratamal 5 years ago.
Added browsers supporting line-height revert to reset a property to the value established by the user-agent stylesheet

Download all attachments as: .zip

Change History (10)

@aljullu
5 years ago

Left: Firefox / Right: Chrome

#1 @aljullu
5 years ago

  • Keywords has-screenshots added

#2 @ianbelanger
5 years ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

I can confirm this issue, although it only occurs when you add the inline style height: 120px;. Marking as good-first-bug

Last edited 5 years ago by ianbelanger (previous) (diff)

@subratamal
5 years ago

Added browsers supporting line-height revert to reset a property to the value established by the user-agent stylesheet

#3 @subratamal
5 years ago

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

#4 @ianbelanger
5 years ago

  • Keywords commit added; needs-testing removed
  • Milestone changed from Future Release to 5.3.1
  • Owner set to ianbelanger
  • Status changed from new to assigned

I can confirm that 48876.patch does fix the issue with no unforeseen negative affects. Marking for commit

#5 @ianbelanger
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 46851:

Bundled Themes: Misaligned input placeholder text Twenty Twenty.

This fixes placeholder misalignment in Firefox when a height is added as an inline style to the input field.

Props aljullu, subratamal.
Fixes #48876.

#6 @ianbelanger
5 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport to 5.3

#7 @SergeyBiryukov
5 years ago

In 46854:

Twenty Twenty: Adjust the comment in [46851] per the documentation standards.

See #48876.

#8 @SergeyBiryukov
5 years ago

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

In 46855:

Bundled Themes: Misaligned input placeholder text Twenty Twenty.

This fixes placeholder misalignment in Firefox when a height is added as an inline style to the input field.

Props aljullu, subratamal, ianbelanger.
Merges [46851], [46854] to the 5.3 branch.
Fixes #48876.

Note: See TracTickets for help on using tickets.