Div теряет свое состояние преобразования иногда, когда многократно добавляет стили в IE9

Я построил ленточную коробку с эффектом параллакса здесь: http://method.ac.

Если вы посмотрите на углы окна подписки в IE9, вы увидите, что они не ведут себя так, как ожидалось, они перескакивают из своего зеркального состояния (через ms-transform: scale (-1, 1) до нормального, но только несколько раз. Он отлично работает в Opera, Firefox, Safari и Chrome.

Я меняю высоту на прокрутку с помощью jquery.

Фон - это svg. Я не могу использовать четыре разных изображения, потому что у webkit есть ошибка, где он не отображает svg, если viewBox установлен в 0 0 1 1, а черный треугольник находится в верхнем левом углу (рисунок).

Любая помощь очень ценится.

1 ответ

Так как ошибка, похоже, связана с svg, возможно, вам стоит пойти на эти углы другим способом. Я предлагаю пограничное искусство. CSS будет выглядеть примерно так:

.corner {
 width: 0px;
 height: 0px;
 position: absolute;
 z-index: 1;
 border: 10px solid #1f1f1e;
 border-top-width: 3px; /* reset to half your height by your javascript */
 border-bottom-width: 3px; /* reset to half your height by your javascript */
}
.left.corner {
 left: -10px;
 border-right-color: #cbc7bb;
}
.bottom.corner {
 bottom: -6px; /* reset to full height by your javascript on the element */
 border-top-color: #cbc7bb; 
}
.top.corner {
 top: -6px; /* reset to full height by your javascript on the element */
 border-bottom-color: #cbc7bb; 
}
.right.corner {
 right: -10px;
 border-left-color: #cbc7bb;
}

Я считаю, что это должно помочь сохранить все кросс-браузер, включая проблему с IE9.

licensed under cc by-sa 3.0 with attribution.