Chrome - тень на блоке включена: активная пропадает нижний отступ

Question

Полагаю, лучший способ показать это в примере: jsFiddle здесь

Обратите внимание, что контейнер (.overlay_inner) с черной рамкой имеет отступы со всех сторон.Если вы нажмете на кнопку в правом верхнем углу с надписью «выбрать», нижний отступ контейнера исчезнет!

Это странное поведение происходит только для меня в Chrome (версия 13).Я не вижу его в IE или Firefox.

Я как бы сузил проблему до этого блока CSS:

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

Соответствующая часть - box-shadow.Когда я удаляю этот бит CSS, проблема не возникает.Хотя для меня это не имеет смысла.Есть мысли?

РЕДАКТИРОВАТЬ: Потенциальный обходной путь найден.Я удалил нижний отступ контейнера и добавил заполнитель div внизу с высотой, равной удаленному количеству заполнения.

Пример: jsFiddle здесь

Чувствуется действительнохак, что делает меня неудобным, так как я думал, что оставил это позади, когда перестал писать для IE, ну да ладно ¯ \ _ (ツ) _ / ¯

Answer 1

Мне удалось минимизировать контрольный пример до этого: http://jsfiddle.net/4GfWY/8/, и я обнаружил, что для возникновения этой ошибки:

1. У вас должен быть блок с

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

2. Некоторый контент, который может вызвать вертикальную полосу прокрутки.

3. Внутренний блок с position: absolute.

4. И если вы затем измените box-shadow для этого внутреннего блока, ошибка возникнет.

Итак, может быть много обходных путей, лучшее, что я думаю, это: http://jsfiddle.net/4GfWY/9/

Там я заменил position: absolute на float: right (и сделал некоторые другие соответствующие изменения), поэтому:

1. Одно из требований к ошибке пропало, а сама ошибка пропала.
2. Если у вас будет много текста в заголовке, вы можете сделать обтекание: http://jsfiddle.net/kizu/4GfWY/10/ (я заменил height на min-height), чтобы кнопка не перекрывала текст заголовка .