Webkit Header Form Flash

[nickcatal]

On the website template our placeholder fix seems to cause a flash on webkit browsers as the content is rendered before the jquery plugin can fake the placeholder.

We need a solution here that is cross browser (the placeholder="" isn't perfect) but is there a polyfill that won't cause the flash?

[imjared]

Few things we could try:

• We could go the modernizr route and use a polyfill. This should get rid of the flash for most users.
• We could get rid of the placeholder altogether and just have the labels above the form. By definition, (http://developers.whatwg.org/common-input-element-attributes.html#the-placeholder-attribute) we were using the placeholder attribute incorrectly so reverting to labels of email/zip next to the fields with placeholder attributes changed to something like [email protected] / 90210, imo, would be fine.

I'm pretty indifferent and think function is more important than complying with the spec. I'd lean toward solution 1 but if we're going to use modernizr, we should cram it all into an externally-hosted file and link to it. I don't want to add bloat to the existing template.

I'll defer to you and submit a pull request based on what you think we should go with.

[nickcatal]

Yeah, I'm aware that it violates the spec. Problem is that it also clears out the placeholder when you click on it. Don't know if that is an important consideration, but if it is even with a polyfill it might not be the best solution for us.

What about something like this? http://fuelyourcoding.com/scripts/infield/

We could host it on a separate S3 bucket for javascript. Not a big deal there.

[imjared]

Could work. If we're using a plugin though, we may still run into the flash of unstyled content. Maybe we can try moving the current scripts to the top? Putting it at the bottom defers their loading which is technically a best practice but can (and does) result in the flash since it is parsed after the main.

The more I think about this, the more I think just wrapping up modernizr if (!Modernizr.input.placeholder)+ a plugin would be our best bet. Users with modern browsers would get no flash and optimal experience. Users with an old browser would get a suboptimal but still working experience.

[nickcatal]

Yeah, I agree, the modernizer approach makes the most sense.

Feel free to try it out and if that works send a pull request. Include a custom placeholder-only modernizer build in the repo if possible, otherwise I'll handle that.