Closed Bug 748526 Opened 8 years ago Closed 8 years ago

If body is {overflow:hidden}, absolute coordinates of an inner absolute element are wrong

Categories

(Firefox for Android :: General, defect)

x86_64
Linux
defect
Not set

Tracking

()

VERIFIED DUPLICATE of bug 753742
Tracking Status
blocking-fennec1.0 --- +

People

(Reporter: paul, Assigned: mbrubeck)

References

()

Details

(Whiteboard: [testday-20120518])

With this code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>xxx</title>
<div></div>
<style>
  p{position:absolute}
  div {
    position: absolute; top: 50%; left: 50%;
    outline: 15px solid red;
  }
  body {overflow: hidden;}
</style>

Expected result: red square in the middle of the page.
Actual result: red square is not visible (overflow on the bottom right corner).

Without `body {overflow: hidden;}`, there's no problem.

Using top:25%; left:25%; centers the square.
I'm a little worried about why this is breaking our viewport
Assignee: nobody → mbrubeck
blocking-fennec1.0: --- → ?
Same deal with bug 746120 ?
Copied the sample to my people account for easier access. What I see when I load the page on the GN is at http://people.mozilla.org/~kgupta/bug/748526.png - it seems to me like the page has a CSS viewport width of 980 as expected, the div is positioned in the middle of that (at x=490), and the overflow is hidden, preventing scrolling beyond x=720 (width of the GN). On devices with width less than 490 the red square will not be visible at all. I'm not sure if any part of this is incorrect.
Paul, do you agree with #3?
Since this issue is affecting maps.google.com as well, I will investigate possible changes to fix it. See https://bugzilla.mozilla.org/show_bug.cgi?id=735652#c13
(In reply to Kartikaya Gupta (:kats) from comment #3)
> Copied the sample to my people account for easier access. What I see when I
> load the page on the GN is at
> http://people.mozilla.org/~kgupta/bug/748526.png - it seems to me like the
> page has a CSS viewport width of 980 as expected, the div is positioned in
> the middle of that (at x=490), and the overflow is hidden, preventing
> scrolling beyond x=720 (width of the GN). On devices with width less than
> 490 the red square will not be visible at all. I'm not sure if any part of
> this is incorrect.

Turns out I was totally wrong here. I will investigate further, and probably end up duping this bug to 735652 since I'm fairly certain they are the same issue.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 747493
blocking-fennec1.0: ? → +
Verify that this bug is fixed on nightly (v15 - 18 May).

The bug still affects beta (v14.0b2)

Tested on sgs2 cyanogenmod 9 (ics)

Tested url: http://people.mozilla.org/~kgupta/bug/748526.html
Whiteboard: [testday-20120518]
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.