924048 - Position absolute not working as expected when using background-image and content:after for a div with display:table-cell

Status: RESOLVED DUPLICATE of bug 63895

(Core :: General, defect)

Description

[karen.menezes]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

- My aim is to have 3 divs of equal width and height using Pure CSS. For this, I use display:table. I also have an icon for each div with display:table-cell.
- Created a div with display:table, table-layout:fixed and width:100%. 
- Inside are 3 divs with display:table-cell
- I want a background-image icon for each of these table-cell divs. Since I want to manipulate the opacity of the icon on a media query of 830px (which can't be done using background-image), I use content:after to do so.
- Set position:relative on each of the divs with display:table-cell and use position:absolute for the :after property.



Actual results:

- The icon is positioned absolutely and works as expected in the latest IE and Chrome.
- In Firefox, the icon's background position appears to be positioned relative to the viewport and not to the div with display:table-cell. BTW, if this is changed to display:block, things work as expected in Firefox.


Expected results:

I have made a demo here. You can view in Chrome, IE and FF and see the different behaviour in FF.
http://karenmenezes.com/background-image-opacity/index.html

Comment 1

[Boris Zbarsky [:bzbarsky]]

> Set position:relative on each of the divs with display:table-cell

Gecko doesn't support treating those as a containing block for absolutely positioned items, unfortunately.  :(

Comment 2

[karen.menezes]

well that is a pity. Is it on the roadmap, by any chance?

Comment 3

[Boris Zbarsky [:bzbarsky]]

Not explicitly; as I just said in that bug, it involves redesigning how absolute positioning works...

It also involves getting the specification updated to actually cover this case; right now per CSS the behavior in this situation is undefined.