MSIE9 -- text in input/textarea not obeying current padding when CSS for width and padding adjusted simultaneously

Question

I have a simple script that adds and removes padding-left to textareas/inputs on focus/blur, respectively. This is to make room for a small, absolutely-positioned button on the left side of the field, without blocking the text underneath it. [Edit] It simultaneously changes the width of the element as well, to keep the total size of the block consistent.

In almost all browsers this works fine and dandy, except MSIE 9. [Edit] Although the box stays the same size, indicating the CSS for both properties was properly updated, the text in the input/textarea behaves as though the padding has not changed. I know the callbacks for the focus/blur events are firing and updating the DOM object's style properties properly, because fetching the current value of the property always gives you the value expected.

i.e.

var field = $(field);
field.css({
  'padding-left' : 0
});
console.log(field.css('padding-left')); // '0px'

Yet the text in the input/textarea field still shows the previous padding. Basically, something seems to be confusing MSIE9's rendering engine in the context these fields appear when you try to change width and padding at the same time.

As soon as you start typing in the field MSIE will fix the problem and make the text in the input/textarea obey the current padding. Realizing this, I tried adding a field.val(field.val()); to the end of the blur and focus callbacks. This solves one problem, and introduces another in the form of resetting the caret position to the beginning of the input/textarea.

Is there any way to force a browser to redraw a given element without going through the drama of removing and reinserting it into the DOM?

[EDIT]

Here is a fiddle showing an abbreviated form of the code (which has additional functionality in its actual context):

http://jsfiddle.net/KYrXM/

You will see that the padding is updated, but no visible change is made until AFTER you start typing.

This problem goes away if I choose not to change the width property as well, though I need to in order to keep the box size constant in my application.

Answer 1

I don't understand why this is; definitely a bug in IE9, but if you instead set the padding to an empty string '' instead of '0px', it works.

field.css({
  'padding-left' : '' // <- Use '' instead of 0.
});

Here's a working fiddle: http://jsfiddle.net/KYrXM/4/

Alternatively, it will also work if you set it to 1 instead of 0, and you could probably program around the extra pixel.