Welcome to Code Couch

Fixing a disappearing caret in Firefox

Posted by at 1:45pm on October 19, 2008.

There are many issues with Firefox hiding the caret (cursor) in text fields which have focus. There are various fixes, depending on the specifics of your issue, which mostly involve adding a style of “overflow:auto” to the input or container in question.

There is one case that doesn’t appear to have a fix, other than upgrading to Firefox 3: The cursor (caret) in a text input turns invisible when it is over a fixed element. I’ve known about this problem for a while, and have tried many solutions that fixed similar issues, but they never seemed to work for this specific one.

I’ve found a solution that works, but it has 2 drawbacks:

  1. It requires JavaScript to work
  2. It causes rendering errors on the fixed element when scrolling (almost as if the fixed element is scrolling as well)

Using the test harness below, you can see the problem and the fix. I’ve included my test background image after the code, to make the rendering problem very obvious.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Disappearing caret bug - workaround</title>
 
	<style type="text/css">
		#fixedDiv {
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: url(caretBugBg.gif);
			position: fixed;
		}
 
		#contentDiv {
			position: relative;
		}
	</style>
 
	<script type="text/javascript">
		function fixCaretBug() {
			document.getElementById('fixedDiv').style.zIndex = -1;
			setTimeout(fixCaretBugPartTwo, 0);
		}
 
		function fixCaretBugPartTwo() {
			document.getElementById('fixedDiv').style.zIndex = 0;
		}
	</script>
</head>
 
<body>
	<div id="fixedDiv"></div>
 
	<div id="contentDiv">
		<form>
			<input type="text" size="50" value="You cannot see the caret in this text input field..." />
			<br />
			<input type="button" value="Click me to fix that!" onclick="fixCaretBug();" />
		</form>
 
		<p>This text...</p>
		<br /><br /><br /><br />
 
		<p>is used...</p>
		<br /><br /><br /><br />
 
		<p>to produce a vertical scrollbar.</p>
		<br /><br /><br /><br />
 
		<p>If you cannot see a vertical scrollbar,</p>
		<br /><br /><br /><br />
 
		<p>reduce the size of your browser window.</p>
		<br /><br /><br /><br />
	</div>
 
</body>
</html>

There is a small flicker when the fix is enabled, although this could potentially be fixed by hooking into the DOMContentLoaded event and running the fix before the background image is loaded.

A grey rectangle with a black cross on top of it
My test background image

Post to Twitter

Tags:

Comments

There are no responses to this post.

Leave a reply

Comments are closed for this post.