Предотвратете съкращенията на Safari с трансформация

Имам елемент, който е позициониран абсолютно над друг. Работата е там, че фоновият елемент има малък JS, който да се върти по оста Y в зависимост от движението на мишката. За съжаление, виждам проблем в Safari, който не се появява във Firefox или Chrome.

http://jsfiddle.net/cehzd/2/

Елементът на фона преминава през този на преден план и бих искал да знам дали има нещо, което да предотврати това или да го накарам да се държи като Firefox.

Редактиране: Актуализиран пример за включване на фоново изображение (градиент), което е по-точно спрямо това, което виждам в моя сайт. Този бъг се появява както на Windows, така и на Mac (за разлика от предишния пример, без фоново изображение, което беше само на Windows)


css safari transform
person Brian    schedule 10.02.2012    source източник
comment
Изглежда по същия начин за мен на Safari 5.1.3 като Chrome 17 (и двете mac)   -  person Michael Mullany    schedule 10.02.2012
comment
Хм. Пускам Safari 5.1.2 на Windows, надявам се, че не е специфичен за операционната система.   -  person Brian    schedule 10.02.2012
comment
Добрата новина е, че практически никой не използва Safari на windows :-)   -  person Michael Mullany    schedule 10.02.2012

Отговори (2)


arrow_upward
3
arrow_downward

Определено има грешка, но трябваше да променя доста вашия JSFiddle. (Свалихте ли твърде много от действителния си код?). Успях да пресъздам проблема ви, като използвах -webkit-transform-style: preserve-3d;, докато не го използвам (или го направих flat) поправя „изрязването“ в моя код.

Разгледайте този JSFiddle с моята версия на грешката (коментирана) и корекцията. Забележете, че прилагането на това -webkit-transform-style: preserve-3d; създава грешка в Safari (Mac), докато не е в Chrome: http://jsfiddle.net/rgthree/cehzd/

Надяваме се, че това помага.

person rgthree    schedule 10.02.2012
comment
Опростих го много, но моят jsfiddle все още показваше грешката от моя страна (въпреки че в моя случай се показва само в Windows, Mac изглежда добре) Виждам, че вашият пример работи добре, но мисля, че друг проблем, който не спомена, че фоновият въртящ се елемент има фоново ИЗОБРАЖЕНИЕ. В този случай: jsfiddle.net/cehzd/2 добавих градиент (мисля, че действа по същия начин като бг изображение) и можете да видите дали ще изреже плоско или не. :/ - person Brian; 11.02.2012
comment
Съжалявам, трябваше да спомена: вече не трябва да прилагате rotateY към section (разделът държи перспективата, за да се завъртят неговите деца), а по-скоро h1 вътре. Затова поставете фона си на h1. Като това: jsfiddle.net/rgthree/cehzd/3 - person rgthree; 11.02.2012
comment
Благодаря много. Все още имах грешката на моя истински сайт, но копирах вашия HTML в смисъл, че елементът на преден план трябваше да бъде СЕБРЪТ на контейнера за перспектива, който ТОГАВА съдържаше въртящ се дъщерен елемент. уф! Никога не бих разбрал това! :Д - person Brian; 11.02.2012

arrow_upward
0
arrow_downward

Просто бих добавил transform: translateZ(100px); към контейнера на преден план, където 100px е ширината на синия контейнер, разделена на 2, тъй като неговото transform-origin е 50% 50% по подразбиране. Няма да има същия ефект като transform: scale(...);, стига външната обвивка да няма transform-style от preserve-3d.

person Community    schedule 11.12.2017