CODEWITHSUNDEEP
cssfirefoxtransformcontenteditable
Yoshi
Yoshi

Reputation: 3405

Why does the contentEditable's caret disappear when it is scaled down in Firefox, IE?

I'm making a rich web client where you can create slides for a presentation. One of the features is the ability to zoom the page to fit the screen. I use a CSS transform to do so, and on small laptop screens it zooms out. However, my contentEditable text boxes start to lose their flashing caret in these cases (it starts around scale 0.7, and gets worse the more you zoom out).

Check out this simplified case:

<!DOCTYPE html>
<html><head>
<style type="text/css">
div {
    border: 1px solid gray;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}
</style>
</head><body>
<div contenteditable="true">The quick brown fox jumps over the lazy dog</div>
</body></html>

Or at jsfiddle: http://jsfiddle.net/5wJGg/3/

Click on the left-most character, then use your keyboard's Right arrow key to go through all the characters - wait for the caret to flash each time.

I noticed that sometimes Google Chrome/Safari will draw the caret with 2px width in gray.

Is this a sub-pixel rendering bug in Firefox and IE? Is there a workaround? I can't style the caret with CSS so I'm afraid I may be SOL.

[Edit] Just tested this on IE 10 on Windows 8. The caret always appears. When the sub-pixel problem occurs, the caret is displayed thicker and in gray, so it does look like a bug in IE 9 that was fixed, and an outstanding bug in Firefox.

Upvotes: 1

Views: 1054

Answers (1)

Yoshi
Yoshi

Reputation: 3405

Have filed this as a bug in Firefox. Thanks to the help of the guys on mozilla's IRC for reproducing this bug on trunk and figuring out whether it was a bug or not.

https://bugzilla.mozilla.org/show_bug.cgi?id=865930

Upvotes: 1

Related Questions