Shadows vs. layout

I recently discovered something while attempting to use box-shadow  
that I found frustrating, and I am not sure if it is a bug or  
something that CSS addresses or should address. I could not find  
anything in the spec that addresses the issue:

It is my understanding that box-shadow is not supposed to affect  
layout. However, when I have a shadow in an element that is positioned  
close to the right side of the page, and the shadow is offset to the  
right, it can actually cause the page to become wider, and create  
horizontal scroll bars. Positioning the element and the shadow to the  
left does not share the same problem. [1] Text-shadows DO show the  
same sort of behavior. [2]

This seems like the wrong behavior to me. Aside from the fact that an  
absolutely positioned item is also not supposed to affect layout, and  
does anyway, the purely visual effect of a shadow is such an ephemeral  
thing that it should never, ever, affect layout. I just can't imagine  
a situation where I would want the page to become wider because I  
added a shadow to it.

I found this problem while trying to recreate the rather largely  
blurred shadows of Mac OS X, and discovered that it limited how close  
to the right side I could get without having a scroll bar appear.  
There didn't seem to be any other way around it without changing the  
overflow properties of the container block to hidden and giving it a  
fixed width, which was not an option for me.

I didn't find anything in the spec about the meaning of "does not  
affect layout", but I think for the shadow properties at least it  
should elaborate that adding a shadow does not increase the size of  
its container in any circumstance.

[1] http://www.bradclicks.com/cssplay/shadow_vs_layout.html
[2] http://www.bradclicks.com/cssplay/text-shadow_vs_layout.html

Received on Monday, 3 August 2009 17:15:48 UTC