Chrome - shadow in the block: active so that the bottom fill disappears

Question

I believe the best way to show this in the following example: jsFiddle here

Please note that the container ( .overlay_inner ) with the black border has a gasket on all sides. If you click on the button in the upper right corner marked "select", the indentation at the bottom of the container will disappear!

This strange behavior only occurs for me in Chrome (version 13). I do not see it in IE or Firefox.

I kind of narrowed the problem down to this CSS block:

 input[type=button]:active { background: -webkit-linear-gradient(top, #eaeaea, #e2e2e2); box-shadow: inset 0 0 3px #aaa; } 

The relevant part is box-shadow . When I remove this CSS bit, the problem does not occur. Doesn't make sense to me. Any thoughts?

EDIT: Potential workaround found. I removed the bottom container gasket and added a div placeholder at the bottom with a height equal to the removed bag.

Example: jsFiddle here

It feels really hacky, which makes me uncomfortable since I thought I left it after I stopped writing for IE, but ok ... ¯ \ _ (ツ) _ / ¯

Answer 1

I was able to minimize the test case: http://jsfiddle.net/4GfWY/8/ , and I found that the requirements for this error are:

• You must have a block with

   overflow: auto; position: relative;/* Or on any other block in this but over absolute one */ padding-bottom: 100px;/* Any bottom padding */ 

• Some content that will result in a vertical scrollbar.

• Indoor unit with position: absolute .

• And if you change the box-shadow for this inner block, an error will occur.

So there can be many workarounds, best of all I think: http://jsfiddle.net/4GfWY/9/

There I replaced position: absolute with float: right (and made some other appropriate changes), so:

• One of the error requirements disappeared, and the error itself disappeared.
• If you have a lot of text in the header, you can force it to wrap: http://jsfiddle.net/kizu/4GfWY/10/ (I replaced height there with min-height ), so the button will not overlay the header text.