开发者

Chrome - Box shadow on :active causes bottom padding to disappear

I suppose the best way to show this is in an example: jsFiddle here

Notice that the container (.overlay_inner) with the black border has padding on all sides. If you click on the button in the top right labeled "select" the container's bottom padding disappears!

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

I've sort of narrowed the problem down to this block of CSS:

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

Relevant part is the box-shadow. When I remove that bit of CSS, the problem doesn't occur. Doesn't make sense to me, though. Any thoughts?

EDIT: Pote开发者_运维百科ntial work-around found. I removed the container's bottom padding and added a placeholder div at the bottom with a height equal to the padding amount removed.

Example: jsFiddle here

Feels really hackish which makes me uncomfortable since I thought I left that behind when I stopped writing for IE, but oh well ¯\_(ツ)_/¯


I managed to minify the test case to this: http://jsfiddle.net/4GfWY/8/ and I found that the requirements for this bug to occur are:

  1. 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 */
    
  2. Some content that would cause a vertical scrollbar.

  3. An inner block with position: absolute.

  4. And if you'd then change box-shadow for this inner block, the bug occurs.

So, there can be a lot of workarounds, the best I think is: http://jsfiddle.net/4GfWY/9/

There I replaced the position: absolute to float: right (and made some other corresponding changes ), so:

  1. One of the requirments for bug is gone, and the bug itself is gone.
  2. If you'd have a lot of text in title, you could make it wrap: http://jsfiddle.net/kizu/4GfWY/10/ (I replaced there height to min-height), so the button wouldn't overlay the title's text.
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜