Теневые артефакты во время анимации в IE9

Вот css, html и js для воспроизведения:

HTML:

<div id="outer">
    <div>123</div>
    <div id="inner">345</div>
</div>

CSS

#outer {
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
}

#inner {
    height: 200px;
}

JS:

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
    });
});

и http://jsfiddle.net/DwApF/, а также

Какие-либо обходные пути для этой проблемы?

enter image description here

Ответы

Ответ 1

Попытка # 1

http://jsfiddle.net/DwApF/3/

Это скрывает тень, а затем восстанавливает ее после завершения слайда. Это взломать решение, но это способ, которым можно обойти различные типы поведения.

Попытка # 2

http://jsfiddle.net/DwApF/11/

Это делает одновременную анимацию как внешних, так и внутренних контейнеров. Он скользит тень без артефактов. Однако вам нужно будет вручную манипулировать высотой внешнего контейнера, а также заниматься сокрытием содержимого внутреннего контейнера. устраняет проблему с артефактом.

Попытка # 3 - Мое предпочтительное решение

http://jsfiddle.net/DwApF/12/

Это все еще использует одновременную анимацию как внешних, так и внутренних контейнеров. Я не вижу никаких артефактов в IE9. Он также обрабатывает скрытие содержимого внутреннего контейнера с помощью overflow: hidden.

Калибровка внешнего контейнера должна выполняться вручную, но я думаю, что это адекватное решение. Должен быть способ определить свернутую высоту с помощью jQuery, чтобы это значение не требовалось жестко закодировано.

Это решение работает в IE9, Chrome и Firefox. Обратите внимание, что я добавил несколько цветов/границ, чтобы было легче видеть разные контейнеры.

Ответ 2

Плохая новость в том, что ошибка в IE10 хуже. Хорошей новостью является то, что это простое правило, похоже, исправляет его - по крайней мере, в IE10. Поскольку IE9 поддерживает: после псевдо класса, он также должен работать.

.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}

Замените .Element либо именем класса, либо ID (#Element) объекта, который показывает артефакт.

В IE9 часто назначается переполнение: скрытый будет работать - хотя это не работает в IE10.

Ответ 3

Это решение сработало для меня - просто анимируйте атрибут box-shadow родителя в одно и то же время:

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});

Ответ 4

Мне это показалось: просто оберните div в другой div этими стилями на внешнем div

padding-bottom: 10px;
padding-right: 0px;
overflow: visible

Не знаю, почему это сделало трюк для меня.

Ответ 5

Решение для меня состояло в том, чтобы поместить DIV, я хотел исчезнуть внутри другого DIV, как было упомянуто ранее.... ОДНАКО..... Я не применяю к нему каких-либо специальных стилей, Вместо этого все, что я сделал, это использовать jQuery для установки на новый родительский DIV и сделать это вместо этого.

Он избавился от этих досадных теневых артефактов для меня. (на IE10)