primers

When fixing the problem, I found that one element had the box-shadow attribute set, and other elements had the same property, but the shadow of this element was invisible. I tried to change the color value to be more obvious, but I still couldn’t see it. Sample problem, sample QR code.

  • Origin
  • My GitHub

Question why

The first thing to think about is if the attribute is written wrong, but all the other elements are displayed normally, this is a common style. Is there a style overlay? A closer look in the browser shows that the style does override, but not the box-shadow attribute. Then carefully with the normal display of the element comparison, found a point of difference: the parent element of one element can scroll, the parent element of another element can not scroll. So try removing overflow-y Settings, and you’re done!

Although the problem was solved, I wanted to understand some of the reasons, so I searched relevant materials and found some explanations, which I found useful. The following is the translation of part of the content.

When casting a shadow, the element’s border box appears to be opaque, assuming the spread distance is 0, and its borders have the same size and shape as the border box. The shadow is drawn from the outside of the border, and the shadow is clipped inside the element box border.

When an inner shadow casts a shadow, everything beyond the edge of the inner margin appears to be transparent. Assuming the spread is 0, its edge has the same size and shape as the inner margin box. Shadows are drawn from inside the inner margin boundary, and the shadows are clipped outside the element’s inner margin box.

The shadow effect is applied from front to back: the first shadow is on the top layer and the others are on the bottom layer of the shadow. Shadows do not affect the layout and may overlap with other boxes or their own shadows. In terms of content stacking and drawing order, the outer shadow of an element is immediately drawn under the element’s background, the inner shadow is immediately drawn over the element’s background, and, if there is a border, the inner shadow is immediately drawn under the border and the border background image.

According to the above content, combined with the problems encountered, I came to an idea: since the drawing of shadows does not affect the layout, then the shadow does not occupy the actual space. Test sample, sample QR code.

Thus, shadows do not take up space in the normal document flow.

To get back to the problem, the parent element sets the overflow property, whose value, except for visible, gets clipped when content goes beyond the inside margin. The height and width of the child element are the same as that of the parent element. When the box-shadow is set for the child element, the shadow drawn from the child element’s border is the same as that of the parent element’s border. The shadow drawn from the child element extends beyond the parent element’s inner margin and is clipped by overflow. You can’t see shadows.

The relevant data

  • MDN overflow
  • overflow-clipping
  • box-shadow
  • Block formatting context

Hide to cry