Артефакты теней во время анимации в IE9 - PullRequest
Новая
       20

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

13 голосов
/ 30 декабря 2011

Вот 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

Ответы [ 5 ]

8 голосов
/ 30 декабря 2011

Попытка # 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. Обратите внимание, что я добавил несколько цветов / границ, чтобы было легче видеть разные контейнеры.

7 голосов
/ 04 декабря 2012

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

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

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

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

3 голосов
/ 15 марта 2012

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

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});
1 голос
/ 28 февраля 2013

Мне показалось, что это работает: просто оберните div в еще один div с этими стилями на внешнем div 

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

Не знаю, почему это помогло мне.

0 голосов
/ 03 июля 2013

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

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

...