Предотвратите сокращения Safari с преобразованием

Question

У меня есть элемент, который расположен абсолютно выше другого.Дело в том, что элемент фона имеет небольшое вращение JS по оси Y в зависимости от движения мыши.К сожалению, я вижу проблему в Safari, которая не появляется в Firefox или Chrome.

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

Элемент background прорезает передний план, и я хотел бызнать, есть ли что-нибудь, чтобы предотвратить это, или он ведет себя как Firefox.

Редактировать: Обновлен пример, включающий фоновое изображение (градиент), которое более точно соответствует тому, что я вижу на своем сайте.Эта ошибка появляется как в Windows, так и в Mac (в отличие от предыдущего примера, без фонового изображения, которое было только в Windows)

Answer 1

Определенно, есть ошибка, но мне пришлось немного изменить ваш JSFiddle. (Вы слишком много разделили от своего фактического кода?) .Я смог воссоздать вашу проблему, используя -webkit-transform-style: preserve-3d;, но не используя ее (или не делая ее flat), исправляет "вырез" в моем коде.

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

Надеюсь, это поможет.

Answer 2

Я бы просто добавил transform: translateZ(100px); к контейнеру на переднем плане, где 100px - ширина синего контейнера, разделенная на 2, поскольку его transform-origin является значением по умолчанию 50% 50%. Это не будет иметь тот же эффект, что и transform: scale(...);, если внешняя оболочка не имеет transform-style из preserve-3d.