360262 - Text in CSS absolutely positioned DIV starts to wrap when moved beyond original right edge when page has been horizontaly scrolled

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Jon Wickström]

User-Agent:       Opera/9.01 (Windows NT 5.1; U; en)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

I have a page with an absolutely positioned div containing divs:
<div id="mouse_timestamp"><div>This is some text</div><div>&nbsp;</div></div>

Styled with:
#mouse_timestamp {
	position: absolute;
	background-color: #ffa;
	border: 1px solid black;
	margin: 0;
	padding: 0.2em;
	display: none;
	z-index: 3;
	cursor: default;
}
#mouse_timestamp div {
	padding: 0;
	margin: 0;
/*	white-space: nowrap; */
}

The DIV is moved in JavaScript to follow the mousecursor. When the div is moved close to the window right edge the text is wrapped (as it should). If the window is scrolled horizontaly the text wraps at the same position (before it reaches the new "edge") (as when the window was not scrolled).

Reproducible: Always

Steps to Reproduce:
1. Implement a page with the infomation in details 
2. Make the page wider than then window
3. Move the div in script to follow the mousecursor
4. Scroll the window a bit to the left
5. When the right edge of the div pases the initial right edge of the window the text starts to wrap inside the div



Expected Results:  
Text should now wrap before it reaches the new right edge in the document/window

white-space:wrap is commented out in the style. Uncomment it to see the expected behavior when moving past the original right edge (text does not wrap). Tested with FF 1.5 and 2.0

Comment 1

[Jon Wickström]

The script for moving the div looks like this:
	var mouse_timestamp = document.getElementById('mouse_timestamp');
	mouse_timestamp.style.left = (event.clientX+15+document.documentElement.scrollLeft) + 'px';
	mouse_timestamp.style.top = (event.clientY+20+document.documentElement.scrollTop) + 'px';
	mouse_timestamp.style.display = 'block';