Open
Bug 779896
Opened 12 years ago
Updated 2 years ago
{inc}absolutely positioned elt's inside relatively pos. inlines misplaced on initial reflow when page has vertical scrollbar
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
NEW
People
(Reporter: richard, Unassigned)
References
(Depends on 1 open bug)
Details
Attachments
(4 files)
User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11
Steps to reproduce:
I created some spans with a pseudo before element containing a icon I wanted to sit directly next to the text.
Below is some test code I created to illustrate the issue.
<!doctype html>
<html>
<head>
<style>
.container {
height: 100px;
width: 300px;
margin: 10px 100px;
padding: 10px;
border: 1px solid #000;
}
.inner-container {
float: right;
}
.inner-container2 {
position: relative;
}
.inner-container3 {
float: left;
}
.bug {
position: relative;
padding-left: 40px;
}
.bug:before {
content: " ";
position: absolute;
margin-left: -40px;
height: 27px;
width: 32px;
background: url('http://www.mozilla.org/img/mobile/home-firefox-logo.png') 0 0 no-repeat;
}
</style>
</head>
<body>
<h1>Example with container, fails</h1>
<div class="container">
<span class="bug">Hello, World</span>
</div>
<h1>Example with container "float: right", fails</h1>
<div class="container">
<div class="inner-container">
<span class="bug">Hello, World</span>
</div>
</div>
<h1> Example with container "position: relative" fails</h1>
<div class="container">
<div class="inner-container2">
<span class="bug">Hello, World</span>
</div>
</div>
<h1>Example with container "float: left" fails</h1>
<div class="container">
<div class="inner-container3">
<span class="bug">Hello, World</span>
</div>
</div>
</body>
</html>
Actual results:
When rendered the pseudo element appears past the padding point of the span element. However, when I go into firebug and interactively change the "margin-left" value on the pseudo before element, and then return it to its original value the element correctly positions itself within the padding.
Expected results:
The pseudo before element should have been positioned inside the padding that was created on the span. I've also tested this code against chrome, safari, ie, and opera and all behave as expected.
|
Reporter | |
Updated•12 years ago
|
OS: Windows 8 → All
|
||
Comment 1•12 years ago
|
||
The output of Safari is the same as Firefox.
|
|
Reporter | |
Comment 2•12 years ago
|
||
I ran the code on Safari v6.0 build 8536.25 OSX 10.8 and is outputting correctly.
However, Safari 5.1.7 Build 7534.57.2 on Windows is outputting the same as Firefox .
(In reply to Alice0775 White from comment #1)
> Created attachment 648490 [details]
> reporter's html
>
> The output of Safari is the same as Firefox.
|
|
||
Comment 3•12 years ago
|
||
|
|
||
Comment 4•12 years ago
|
||
|
|
||
Comment 5•12 years ago
|
||
Strange thing,
The different is only H1 tag between attachment 648554 [details] and attachment 648555 [details].
However, Rendering of pseudo-element is totally different.
|
|
||
Comment 6•12 years ago
|
||
|
|
||
Updated•12 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Updated•12 years ago
|
Summary: Rendering issue with Pseudo Before → Inconsistency rendering issue with Pseudo Before
|
||
Comment 7•12 years ago
|
||
Zooming in or out on attachment 648554 [details] makes the problem go away; thus it appears related to incremental layout.
Summary: Inconsistency rendering issue with Pseudo Before → {inc}Inconsistency rendering issue with Pseudo Before
|
|
||
Updated•12 years ago
|
Component: Layout → Layout: R & A Pos
|
|
||
Comment 8•12 years ago
|
||
The difference between "bad" and "good" examples is whether the page is tall enough to need a scrollbar. Changing the height of the browser window changes whether these examples produce good or bad results.
|
|
||
Updated•12 years ago
|
Summary: {inc}Inconsistency rendering issue with Pseudo Before → {inc}absolutely positioned el'ts inside relatively pos. inlines misplaced on initial reflow when page has vertical scrollbar
|
|
||
Comment 9•12 years ago
|
||
At least with this testcase, this seems to have regressed sometime between Firefox 3.0 and 3.5.
|
|
||
Comment 10•12 years ago
|
||
Regression window
Good:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1a2pre) Gecko/20080817033619 Shiretoko/3.1a2pre ID:20080817033619
Bad:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1a2pre) Gecko/20080818033342 Shiretoko/3.1a2pre ID:20080818033342
Suspected: Bug 238072
|
|
||
Comment 11•12 years ago
|
||
(In reply to Alice0775 White from comment #10)
> Suspected: Bug 238072
This testcase would be useless prior to bug 238072, but one without generated content might not be.
I don't think a regression range is likely to be useful here, though.
|
|
||
Updated•10 years ago
|
Summary: {inc}absolutely positioned el'ts inside relatively pos. inlines misplaced on initial reflow when page has vertical scrollbar → {inc}absolutely positioned elt's inside relatively pos. inlines misplaced on initial reflow when page has vertical scrollbar
|
|
||
Comment 12•8 years ago
|
||
I can't tell immediately what the expected behavior is, so hard to tell quickly whether the bug is fixed.
But if it's not, it's probably a bug in nsAbsoluteContainingBlock::FrameDependsOnContainer or related code, like bug 1347759 was.
|
|
||
Comment 13•8 years ago
|
||
Or maybe my previous dependency on bug 255139 was correct..
|
|
||
Updated•6 years ago
|
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•