785356 - Text becomes offset in absolute objects if a IMG tag is present above

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Andy Woolley]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.83 Safari/537.1

Steps to reproduce:

Added a IMG tag to HTML, then added a static DIV and overlayed it with an absolute positioned DIV with the same text.


Actual results:

Margin appeared inside the absolute div causing the text to appear incorrectly. The text shifted down by one pixel.


Expected results:

The text should not have inherited any margins and both DIV's should have appeared the same.

Works fine in all other browsers.

Comment 1

[Andy Woolley]

Here's a URL detailing the issue:

http://www.milonic.com/bugreports/mozbug6.html

Comment 2

[Boris Zbarsky [:bzbarsky]]

You're setting the position of div2 manually, and are doing so incorrectly, such that div2 is not placed in the same location as div1.  In particular, this code:

  document.getElementById("div2").style.top  = 
    document.getElementById("div1").offsetTop  + "px"

is wrong if the actual vertical position of div1 is not on a pixel boundary, because offsetTop rounds to the nearest pixel (it predates subpixel layout and high-quality typography).  Using 

  document.getElementById("div2").style.top  = 
    document.getElementById("div1").getBoundingClientRect().top  + "px"

will do the right thing.  Same thing for .left.