隐藏的textarea填充在IE 11中不起作用

Question

I am trying to add padding to a simple textarea .

It works perfectly if the textarea is visible on load , but if you dynamically(jQuery) show the textarea then the padding does not take effect.

The above problem only happens in IE and importantly only happens before you type anything in the textarea . Once you type something the padding immediately takes effect.

Is it some IE bug or anything can be done to solve this problem ?

I have made a simple demo here : http://loadmycode.com/build/lymj6_XFP/12

Thanks for the help.

Answer 1

This looks like an IE bug. If the content is not empty, like $('textarea').val(' ').show().focus(); it displays the padding, but if you delete the space the cursor goes back to the top.

Since it works when the textarea is displayed when the page is loaded, you can use this work around: remove display: none; from the style and add $('textarea').hide(); to a ready event on your page.

Demo: http://loadmycode.com/build/lymj6_XFP/29