Why is Firefox not properly rendering this textarea element?

Question

I made some changes to one of my web pages (CSS and HTML) and now Firefox is not rendering this textarea properly. It has a sort of jitter effect happening in the middle of the top line. I'm not sure if it has anything to do with the changes I made, but what could be causing this?

<div id="CommentForm">
    <form action="/posts/add-comment" method="post">
        <input type="hidden" id="Table_Name" name="Table_Name" value="Posts" />
        <input type="hidden" id="Table_ID" name="Table_ID" value="47" />
        <input type="hidden" id="IsLiveBroadcast" name="IsLiveBroadcast" value="1" />
        <textarea name="Comment_Body" id="Comment_Body" rows="1"></textarea>
        <div id="error-messages"></div>
        <input type="submit" class="floatRight" id="postComment" value="Post your response" />
    </form>
    <div class="clear"></div>
</div>

And the CSS being applied:

#live_broadcast_post #CommentForm {
    margin: 0;
    padding: 0;
    width: 460px;
    height: auto;
    background: none;
}

#live_broadcast_post #CommentForm textarea {
    font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
    font-size: 12px;
    padding: 5px;
    width: 98%;
}

The strange thing is that this wasn't happening before I made the changes, and now it only affects Firefox, not any other browser I have tested.

Update:

I noticed that when the page loads, it renders correctly. Only after an iframe (also on this page) is finished loading does the rendering change.

Answer 1

Can you give anymore detail, like posting the pertinent CSS and HTML to that area?

Answer 2

Seeing as even the text itself is affected, this looks rather like a OS / graphics card / rendering problem.

I would try it on a different machine first before questioning the markup.

Answer 3

I've been seeing this jitter in some websites, not with Firefox only. It's very suspicious and I didn't figure out what it is so far. That's my experience so far.