IE11 Placeholder Transition Issue
I hit an issue recently in IE11 where an input wasn't visible until it was focused. There was a really nice transition in place of when the input is focused, it expands and the placeholder fades in after a short delay.
For some reason, in IE11, the input wasn't visible until it was focused.
The rule was essentially something like this:
transition: opacity ease 0.2s;
This works as expected in modern browsers, but autoprefixer generates the following as well:
/* same as above */
The opacity rule was applied to the input itself, and so it wasn't visible. I tried adding a comment telling autoprefixer to ignore it, but we're locked on an older version that doesn't have that capability. So what now?
Turns out it's a small change. We swap
transition: color ease 0.2s;
I haven't worked with IE11 in a few years, but it was a fun one to chase down. I made a demo on CodePen to test it out.css