Flicker on keydown in Chrome/Safari about vue-input-autowidth HOT 12 CLOSED

We had the exact same issue and fixed it.

1. box-sizing needs to be initial (default)
2. You need the comfort zone to be around 25 (for smoothness)
3. You need that comfort zone to apply before and after the text. (left and right)
   => Set the text align to center to achieve this.

from vue-input-autowidth.

Thanks for investigating guys, I'm going to play around with it today and see if I can come up with anything.

from vue-input-autowidth.

Thanks for the report! Do you have box-sizing: border-box; on that element's css? I'm unable to reproduce in the repo example. Could you copy your example to a JSFiddle or similar?

from vue-input-autowidth.

It's really bizarre. My example is a little too complex to post on jsbin.

However, when building a simple input component in jsbin it works fine (unless I add CSS letter-spacing).

But when I remove all of the styles of my app's component it still flickers.

Even when I remove

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

from the global CSS.

from vue-input-autowidth.

Addition: On an old project, with no previous problems whatsoever, I just updated vue, vue-loader and vue-template-compiler to their latest versions. Now I have the same problem flicker showing up.

from vue-input-autowidth.

Very strange! Almost makes me think it's something funny with Vue's re-rendering code. I'll spend a bit of time seeing if I can reproduce.

from vue-input-autowidth.

Various things seem to exacerbate the problem. With my CodePen I have so far identified letter-spacing, font-size and box-sizing as potential factors.

I was using 2.5.2 of Vue. And again: only problems in Chrome/Safari showing up. Not in Firefox.

from vue-input-autowidth.

It's a bit surprising letter-spacing affects it, as I do copy letter-spacing to the clone helper. I have not checked compatibility with the latest version of Vue, so I'll have to do that.

from vue-input-autowidth.

I played with the pen I posted above, and changing box-sizing and text-align: center had no impact whatsoever.

Only increasing the comfortZone to 25 seemed to smoothen things.

from vue-input-autowidth.

Similar issue here. Tried the workarounds but still having some small flickering.

from vue-input-autowidth.

Same problem, adding comfort zone 20+ fixes it but this is a little too high for me unfortunately

from vue-input-autowidth.

I tried in the latest version of Chrome and I wasn't seeing this anymore with the latest version of the package.

from vue-input-autowidth.