Tabs: input text truncated when width is set inside tabs in IE10

[yauhen]

I have tested tabs in Jquery UI 1.8.15 and upper. In IE 10, for even small demo if you have input type="text" inside tab and set width for input in css - text by strange reason is truncated. I see that base theme .ui-widget input style affect fonts. But style only itself doesn't case such problems. Only after applying tabs it create problems.

​http://jsbin.com/oniguj/1/

[petersendidit]

This is also a problem with 1.8.24 so most likely a bug in IE10.

[tj.vantoll]

Created a minimal new example that shows that applying the tabs creates the problem - ​http://jsfiddle.net/tj_vantoll/HJ5cr/4/.

[tj.vantoll]

This is not a jQuery UI bug; I can recreate the problem without it - ​http://jsfiddle.net/tj_vantoll/2NGEQ/2/.

[tj.vantoll]

I filed a bug for IE10: ​https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-clipped-when-a-font-size-is-applied-to-a-parent-element

[Scott González]

I'd like to investigate this a bit more to see if there's any workaround we can implement. I'll also nudge Microsoft to see if they can get this fixed in a patch release.

[Scott González]

From Tony Ross (Microsoft):

Unfortunately I don’t think this will make our bar for a patch update since the issue automatically resolves itself when the user interacts with the control, but I’ll definitely make sure it stays on our radar for the next release.

As for code-based workarounds, there are various ways you can poke the input element itself to get it to it to update if you so desire (updating the value, changing the width of the element inline, assigning the width inline to begin with, etc). These are fairly easy to use on page-by-page basis, but probably not as easy to generically apply as part of a framework like jQuery UI.

Based on that, I'm going to set this back to wontfix.