When use some fonts autoresize changes height after type

[ChrisRobston]

Hello. I noticed that if I use some fonts (for example Roboto) then autoresize adjust height of input when I begin to type. Before I type (on page load) it sets height at 45px, for example, after I begin type it set to 47px.

What can cause this weird behavior and how to fix it?

[jackmoore]

I'm assuming that your web-font hasn't finished loading by the time Autosize is applied, and that the web-font (Roboto) dimensions are slightly different than the placeholder the browser used.

You'll need to call autosize.update(element) once the font has finished loading to calculate the new height. There is a working draft standard for detecting this (https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready), but you'll probably need to use a 3rd party script for good cross-browser support.

If you just wanted to support bleeding edge, I think you could do this:

var targets = document.querySelectAll('textarea');
autosize(targets);
document.fonts.ready.then(() => {
  autosize.update(targets);
});

[ChrisRobston]

@jackmoore no, it's downloaded< I've check it first.

[ChrisRobston]

the issue is happening when autosize initialize downloading. When I navigate to page with autosize from other page, then everything works fine. But if I navigate directly to the page with textarea and autosize download font - then this issue is happening

[jackmoore]

I don't think you understood my comments.

[ChrisRobston]

I understand your answer clearly, but I don't want to spend hours testing how this font readiness detection will work in dozens of browsers. Maybe it's better to load fonts without autosize then what you are suggesting.

[ChrisRobston]

Damn. Even after I add webfontloader still autosize is loading font. Can I adjust this?

THis is probably another question, but how do I delegate font-loading to webfontloader completely???

[jackmoore]

Autosize doesn't have anything to do with what fonts are loaded.

[ChrisRobston]

You right, this one is working in Chrome

document.fonts.ready.then(() => {
      autosize.update(this.$refs.textarea)
    })

But now I have noticeable resizing of textarea when page loads 😄
So, this glitch with Roboto impossible to fix completely?

[jackmoore]

While the font is loading the browser will first paint the document with a placeholder of how large it things the font will be based on the font-size. If Autosize runs during this time, it's going to be a little off once the real font loads, because the real font is going to have slightly different size and spacing to it than the placeholder.

This is unavoidable for Autosize because there just isn't enough information for it to do an exact size, it has to use what the browser painted to the DOM. So you would either want to wait until the font is loaded to assign autosize, or go ahead and assign autosize and then call autosize.update once the font has loaded.

It's an unfortunate situation, I'm surprised it took so long for this to become a ticket. I hadn't really had to think about it until now. It's a valid issue, I have to decide what Autosize's responsibility should be in this situation. I will have to explore adding automatic resizing on font-load, since that is a detectible event.