jQuery UI .addClass() анимация с заполнением в IE9+

У меня есть страница, на которой есть несколько квадратных <div>s, некоторые из которых, при нажатии, имеют скрытый контент, связанный с ними, который необходимо отобразить (назовем их "расширяемыми элементами div"). Иногда скрытый контент может быть довольно длинным, поэтому он находится в отдельном <div>s ("детализация"). Желаемый эффект заключается в том, что "подробный div" сначала имитирует размер и положение "расширяемого div" перед запуском анимированного пользовательского интерфейса jQuery .addClass('fullscreen', 'fast', 'swing') вызов, который применяет следующие правила:

.detail.fullscreen {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 10%; /* all elements on page use box-sizing:border-box */
}

.addClass() Анимация работает как Charm в Chrome, Firefox и, как ни странно, даже в IE8. Тем не менее, анимация не работает правильно в IE9+. Браузер не может оживить paddingи просто добавляет свойство после завершения анимации, что приводит к действительно ужасной ошибке в пользовательском интерфейсе. Пожалуйста, посмотрите jsFiddle ниже, чтобы увидеть ошибку в действии:

скрипка

Я думаю, что это как-то связано с тем, как IE рендерит box-sizing: border-box;, но этот стиль очень полезен и прекрасно работает во всех других современных браузерах. Я что-то пропустил?

ПРИМЕЧАНИЕ: я также заметил, что jQuery 2.x и jQuery UI 1.10.x не работают для меня в jsFiddle в IE, но, возможно, это вопрос для другого дня.

Источник

1 ответ

Решение

Проблема возникает из-за разницы модальной коробки. Как вы сказали, это только из-за заполнения. Чтобы решить эту проблему, удалите прокладку из деталей. <div>и добавить div внутри вашей детали <div> с обивкой. Это даст вам желаемый эффект.

Источник
Другие вопросы по тегам