Bug 280944 – Typing inside an <input> with several fonts applied causes page to scroll to the top

• Status: NEW
• Component: Forms

[[e-mail]]

Created attachment 472829 [details]
A CodePen reproduction of the issue

When applying some fonts to <input> element in Safari and typing inside of it, the page scrolls to the top (also, placeholder text isn't visible).

[Radar WebKit Bug Importer]

<rdar://problem/137832602>

[Ahmad Saleem]

*** Safari 18.1 Beta ***

Page scroll up as soon as you focus on the textarea / input

*** Chrome Canary 131 ***

Can focus on textarea / input but couldn't type into it.

*** Firefox Nightly 133 ***

Can focus on textarea / input but can type into it.

[Karl Dubost]

To make sure people, do the right thing.

1. Go to https://codepen.io/benblayer/pen/wvVWpgE
2. Scroll to the botton of the page
3. Click in the textarea
4. Enter the letter a



Safari Technology Preview  206           20621.1.3.21.1 scroll to the top
Firefox Nightly            134.0a1       13424.11.7     a appears in the textarea
Google Chrome Canary       132.0.6825.0  6825.0         nothing


Safari
[Log] event: blur, target: [object HTMLTextAreaElement] (vendor-18edf1dfe16da6311df8.chunk.js, line 1)
[Log] event: blur, target: [object Window] (vendor-18edf1dfe16da6311df8.chunk.js, line 1)

Firefox
blur { target: Window, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeOffset: 0, SCROLL_PAGE_UP: -32768, SCROLL_PAGE_DOWN: 32768, … }


And this indeed related only to the fonts. 
Without the font-face, this is working as expected. 
What a weird interesting issue. Thanks benblayer

Adding Vitor.

[Simon Fraser (smfr)]

We scroll to the top because typing a character triggers scrolling the selection into view, but we'e computed a selection rect which is at 0,0. I think the line height computes to 0 somewhere.

[Karl Dubost]

When commenting out the font-face on input AFTER typing,
the character appears:

input {
/*   font-family: 'Custom font', sans-serif; */
  height: 50px;
}

[Karl Dubost]

Created attachment 473175 [details]
rendering in safari

The font has weird rendering sometimes as seen in the screenshot.

The font seems to be a variation of Gotham-Book.

[Karl Dubost]

Created attachment 473177 [details]
rendering in safari, firefox, chrome

Another issue with the font itself it seems unable to wrap up lines longer than the viewport. 

So there is really an issue with the font itself. 
See https://codepen.io/webcompat/pen/eYqQmyZ