<input>'s don't resize on IE

[petetnt]

Yay, yet another IE bug (tested with Microsoft Edge, IE11, IE11 Mobile, most likely affects all of them).

When calculating the placeholder width on stretchy.js#L76

var width = Math.max(element.scrollLeft + offset, element.scrollWidth - element.clientWidth);

the problem is that element.scrollLeft never actually updates on <input>-elements on IE, which results to the inputs being offset wide forever:

There's an workaround for Safari above that line, but like I said, I think the value of scrollLeft stays 0 forever no matter what so I think any workarounds using scrollLeft are out of the picture for an IE fix.

The popular[1] workaround[2] is to use <textarea>s with single rows forced instead, but that doesn't really apply to Scretchy as the whole point is to have a variety of autosizing form elements instead of just going "screw it, just use <textarea> for everything" 🔨

[LeaVerou]

This is a known issue and doesn't only affect inputs with placeholders. Check the Browser Support Notes.
@gregwhitworth from MS is working on a polyfill to address this, and he's also working on getting it fixed in Edge, all because of Stretchy :)

[petetnt]

@LeaVerou yeah the placeholder mention was an oversight from me, so I fixed the title earlier.

Anyway, oh dang. I just pushed a commit on my fork of scretchy that fixes this for IE9-11 + Edge. I am not super happy with it but it does work.

Can't believe I missed that mention about the polyfill, I am sure that I am going blind these days 🍔

[Yaffle]

element.scrollWidth - element.clientWidth ( https://github.com/LeaVerou/stretchy/blob/gh-pages/stretchy.js#L76 )
@LeaVerou , Could you please explain what does it mean?
Probably, element.scrollWidth + (offset - element.clientWidth) should be used, offset - element.clientWidth gives borderLeftWidth + borderRightWidth

[Yaffle]

1. In Webkit-based browsers (Chrome, Safari) input.scrollLeft is incorrect when zoom was used.
   But the expression element.scrollWidth + (offset - element.clientWidth) looks correct for me in Chrome, while Math.max(input.scrollLeft, ...) is not, because when the page zoom < 100% first argument for Math.max is larger.
2. AFAIK, both input.scrollWidth and input.scrollLeft are incorrect in Opera 12, IE > 8 (including Edge)