1198577 - Relative div margins seem to have a bug in Firefox

Status: RESOLVED INCOMPLETE

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

Description

[classic_henry]

Attachment: screencap w/ render comparison

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Steps to reproduce:

Created a page with a div wrapper, parent div, and two child divs. Relevant style is below.

---

.div-wrapper 
{
   position: relative;
   margin: 0 auto;
   /*margin: 8px auto;*/
}

.parent-div
{
   position: relative;
   margin-top: 8px;
}

.child-div1
{
   position: relative;
   margin: 0;
}

.child-div2
{
   position: relative;
   margin: 0 0 1em 1em;
}


Actual results:

Safari (8.0.7) and Chrome (44.0.2403.157) both display the parent div's top margin as affecting the child divs. Firefox seemingly ignores the margin.

The margin works as expected in Firefox, however, with the commented out margin rule in the div wrapper.


Expected results:

The parent div margin-top should create, in this case, an 8px top margin, which affects the relatively positioned child divs.

Comment 1

[Mats Palmgren (inactive)]

Can you attach a small HTML file that demonstrates the problem please?
(or provide a public URL to one)

Comment 2

[classic_henry]

Attachment: HTML file + styles Firefox computes

Comment 3

[Mats Palmgren (inactive)]

Comment on attachment 8652983 [details]
HTML file + styles Firefox computes

Thanks, but this doesn't reproduce the problem AFAICT (even after fixing up
the <style> tag so that the style rules are applied).  I see the same
rendering in Firefox as in Chrome.

Please attach something that when I load it in Firefox shows a different
result than when I load it in say Chrome.

Comment 4

[classic_henry]

(In reply to Mats Palmgren (:mats) from comment #3)
> Please attach something that when I load it in Firefox shows a different
> result than when I load it in say Chrome.

What would that be, exactly? 

This site update is still in development, so should I just post the link when it it goes live?

Comment 5

[Mats Palmgren (inactive)]

(In reply to classic_henry from comment #4)
> What would that be, exactly? 

Just a small example that corresponds to the content on your site that
you think is displayed incorrectly in Firefox.  It's impossible for me
to guess what the problem might be from the info you've given so far.

> This site update is still in development, so should I just post the link
> when it it goes live?

Sure, that works too.

Comment 6

[Mats Palmgren (inactive)]

Attachment: not a testcase

Here's what I guessed from the info you gave.  It looks the same in
Firefox and Chrome so it doesn't demonstrate the problem you're seeing.

Comment 7

[classic_henry]

Attachment: html+style retry

Comment 8

[classic_henry]

Attachment: rendering_difference.png

Uploaded an additional html file and screenshot. If that doesn't help, I'll post the url once the updates are live.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Attachment 8653818 [details] is using an invalid media query so none of those styles are applied.  But if I just make the rules unconditional that attachment renders identically in Chrome and Firefox, as far as I can tell.

Comment 10

[classic_henry]

All right. Probably specific to my setup. The changes are implemented and I'm still seeing Chrome and Safari render a different space from the edge of the browser to the logo and other #masthead elements than Firefox does.

http://jroberts.net/ is the site.

Obv. I have no idea what is causing this issue. Sorry for the irrelevant files.

Comment 11

[Mats Palmgren (inactive)]

The site looks pretty much identical in Firefox 43 and Chrome 46 for me (on Linux).

Thanks for your report but I don't think this is worth spending more time on unless
you can produce a small testcase that renders differently in FF/Chrome that we can
investigate.

Comment 12

[classic_henry]

I defer to your judgement, but can you offer any speculation as to why this might be happening? As the screenshots show, the gap on my setup is about 50% larger in Firefox than it is Chrome or Safari. Even without any plugins/extensions. 

Is it a difference in rendering the box model?

I'm mostly interested for curiosity's sake, but if you can give me some direction to head in, it would help me provide a testcase that qualifies for investigation as well.

Thanks either way.

Comment 13

[Boris Zbarsky [:bzbarsky]]

I just checked on Mac, and I'm not seeing the difference in the gap there either...

Did you change any font settings in any of the browsers involved?

Past that, the only advice I have just removing CSS and markup a bit at a time while making sure that the rendering difference is still there.  Eventually you end up with a small testcase.