Странное поведение after в ie

[Zverushka]

В ие разных версий у формы, которой сделана тень через псевдоэлемент - наблюдается странный эффект. Тень скачет - то на месте, то вниз (при прокрутке), то на место становится, то уходит куда-то. Непонятно, почему. В других браузерах все нормально. сам сайт http://zverushka.zz.mu/water/

Cам стиль тени задан так

:after {      position: absolute;      content: "";      display: block;      top: 100%;      left: 0;      background: url("../img/form-shadow-green.png");      width: 300px;      height: 240px;      z-index: -1;    }

Edited December 28, 2013 by Zverushka

[Radiocity]

А в какой версии ie?

У мужика ухо отклеилось

[Zverushka]

В ие10, ие9, ие8.

А мужик, по ходу, в комплекте шел с дефектом...

В ие11 даже исчезает и появляется.

Edited December 28, 2013 by Zverushka

[npofopr]

А IE разве понимает after? Я всегда вот эту штуку подлючаю, хотя там до IE8

У меня в IE11 все хорошо, в режиме эмуляции IE9 тоже. 

Виртуалки уже не стал включать.

Edited December 29, 2013 by npofopr

[Radiocity]

Посмотрел в ie11 с надстройками 8-10. Все нормально.

[advokatua]

В 11 осле, в режиме эмуляции ie8 верхнего бекграунда вообще нет. Удалил 11-ый ie, пусть он горит в аду, запустил эмуляцию через 10-ый - все ок. По крайней мере бекграунд есть ) Это я к тому, чтобы не спешили ie10 менять, на этот 11-ый треш. ))

 

В ie8 действительно все забавно выглядит, то вниз, то чуть-чуть вниз, то совсем исчезает.

Не понял только, зачем вам "z-index: -1" в "after:"?

Edited December 29, 2013 by advokatua

[Zverushka]

В 11 осле, в режиме эмуляции ie8 верхнего бекграунда вообще нет. Удалил 11-ый ie, пусть он горит в аду, запустил эмуляцию через 10-ый - все ок. По крайней мере бекграунд есть ) Это я к тому, чтобы не спешили ie10 менять, на этот 11-ый треш. ))

 

В ie8 действительно все забавно выглядит, то вниз, то чуть-чуть вниз, то совсем исчезает.

Не понял только, зачем вам "z-index: -1" в "after:"?

Тень длинная, чтобы текст не перекрывала, а то не не выделить будет.

[advokatua]

Я имел ввиду, чтобы z-index убрать. )

Что там перекрывается из текста у себя не заметил. В любом случае можно обойтись без "-1". 

[Zverushka]

Ну в данном случае да, тень только на картинку снизу заходит, но вдруг захотят поменять контент или добавить форму в другом месте - нужно, чтобы она не перекрыла другие элементы (вдруг ссылку перекроет - и тогда она будет уже не рабочей).

[advokatua]

Так, а зачем было высоту тени ставить 240px, когда видимая часть не более 40-50?

[Zverushka]

Фотошоп обрезает слой по выделению ровно до тех пор, пока идет переход. Я вырезала и не парилась, так как если пытаться укоротить слой вручную - скорее всего переход будет обрезан - килобайты все равно не сэкономлены, время потрачен. В общем лишняя работа. Да и даже 60 пикселей не избавят от необходимости -1 z-index.

Edited December 29, 2013 by Zverushka

[klierik]

В 11 осле, в режиме эмуляции ie8 верхнего бекграунда вообще нет. Удалил 11-ый ie, пусть он горит в аду, запустил эмуляцию через 10-ый - все ок. По крайней мере бекграунд есть ) Это я к тому, чтобы не спешили ie10 менять, на этот 11-ый треш. ))

 

да какая разница? эмуляция не даёт 100% гарантии. если требуется проверка в конкретном ИЕ -- в нем и надо проверять.

VirtualBox никто не отменял.

[advokatua]

Klierik, разница в том, что на 10-ом осле можно сэмулировать некоторые баги, так будто это полу-реальный ие8, а на 11-ом уже хрен.

Если нужно эмулировать все баги 8-ого ИЕ, тогда очевидно без виртуалки не обойтись.

[klierik]

@advokatua, раньше натыкался на тот факт, что IE9 рендерил правила, в режиме эмуляции, которые IE8 понимать не должен. да и заказчики разношерстные о своими версиями IE. В итоге в идеале иметь Win7 + IE(8\9\10\11) с последними обновлениями OS