644895 - box-shadow inset on a outer element is hidden by the background image of its nested element

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Fabio A.]

User-Agent:       Mozilla/5.0 (Windows NT 6.0; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: 

Say you have this markup

<div id="wrapper">
    <div id="box_content">
        Content here
    </div>
</div>

If #wrapper has a box-shadow inset and #box_content has a background-image, then #wrapper's box-shadow gets hidden/overwritten by #box_content background-image.

I found somebody reporting this very same issue over at stackoverflow here: http://stackoverflow.com/questions/5400130/why-does-a-background-break-a-box-shadow-inset-effect

The problem is reproducible in Google Chrome too, so I wonder wether this is really a bug, but I haven't been able to gather more information about this.

Reproducible: Always

Comment 1

[Boris Zbarsky [:bzbarsky]]

From http://www.w3.org/TR/css3-background/#the-box-shadow :

  In terms of stacking contexts and the painting order, the outer shadows of an
  element are drawn immediately below the background of that element, and the
  inner shadows of an element are drawn immediately above the background of that
  element (below the borders and border image, if any). 

In particular, the backgrounds of _children_ of the element would paint above the inset shadow (and in fact they paint above the borders and background of the element itself).

So the rendering is exactly what the spec calls for.

Comment 2

[Fabio A.]

Thanks for the reply, thinking of it I had come to the same conclusion, but opening a issue on bugzilla was the only way to get confirmation from the devs, I guess. Thank you for your time!

Comment 3

[Boris Zbarsky [:bzbarsky]]

Not a problem.  Thanks for filing the bug!