Div иногда теряет свое состояние преобразования при многократном добавлении стилей в IE9 - PullRequest
Новая
       22

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

3 голосов
/ 17 ноября 2011

Я построил коробку с лентой с эффектом параллакса: http://method.ac.

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

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

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

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

1 Ответ

1 голос
/ 18 ноября 2011

Поскольку ошибка, по-видимому, связана с 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.

...