WordPress.org

Make WordPress Core

Opened 3 days ago

Last modified 3 days ago

#48876 new defect (bug)

Twenty Twenty: High input fields are misaligned in Firefox

Reported by: aljullu Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-screenshots good-first-bug has-patch needs-testing
Focuses: css Cc:
PR Number:

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 3 days ago.
Left: Firefox / Right: Chrome
48876.patch (538 bytes) - added by subratamal 3 days 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 (5)

@aljullu
3 days ago

Left: Firefox / Right: Chrome

#1 @aljullu
3 days ago

  • Keywords has-screenshots added

#2 @ianbelanger
3 days 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 3 days ago by ianbelanger (previous) (diff)

@subratamal
3 days ago

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

#3 @subratamal
3 days ago

  • Keywords has-patch needs-testing added; needs-patch removed
Note: See TracTickets for help on using tickets.