Предотвращение сокращений 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 я добавил градиент (думаю, он действует так же как изображение bg), и вы можете видеть, будет ли он резаться плоско или нет. :/ - person Brian; 11.02.2012
comment
Извините, я должен был упомянуть: вы больше не должны применять rotateY к section (секция содержит перспективу для вращения своих дочерних элементов), а скорее h1 внутри. Поэтому ставьте свой фон на h1. Вот так: jsfiddle.net/rgthree/cehzd/3 - person rgthree; 11.02.2012
comment
Благодаря тонну. У меня все еще была ошибка на моем реальном сайте, но я скопировал ваш HTML в том смысле, что элемент переднего плана должен был быть SIBLING контейнера перспективы, который ТОГДА содержал вращающийся дочерний элемент. Фу! Никогда бы не догадался об этом! :D - 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