Something strange is happening and I can't pinpoint whether it's a javascript or css issue. Check out this jSFiddle for context. If you type in the input box and the label doesn't appear, delete the text and try typing it again...odd right?
I have a form that can be viewed either directly or in an iFrame. I'm using jvfloat.js on the inputs to create floating labels with the placeholder values.
$(document).ready( function() {
$('input').jvfloat();
});
The results vary across browsers (current versions) and also when viewed within an iFrame or not.
Chrome
In IFrame:
Typing in text field doesn't show the label. The "activeLabel" class is added successfully when inspected, but the label doesn't seem to display. It seems like there might be an issue with a CSS transform preventing the label from moving up behind the input field.
Outside IFrame:
Works as expected.
Firefox
In IFrame / Outside IFrame:
Works as expected.
I haven't tested it on other browsers yet. Every now and then, the labels don't work and I can't consistently replicate the issue.
In the jsFiddle, do you notice any major JavaScript or CSS problems that could be causing this unusual behavior?