Translate3D () يسبب لقطة في رحلات السفاري

Question

لدي تطبيق ويب أقيمه يعتمد بشكل كبير على تحديد المواقع المطلقة، وتحويلات CSS، وتحولات CSS.

My Markup:

giveacodicetagpre.

بلدي CSS

giveacodicetagpre.

يمكنك أن ترى ذلك في العمل في http://jsfiddle.net/kjg3f/24/

إذا نظرت إلى المثال الموجود في Safari (Desktop و iOS)، فسترى أن الصورة الأمامية قد تم قصها بواسطة الخلفية.في Chrome، يبدو أنه يعمل بشكل صحيح.

إزالة Translate3D () من الخلفية يبدو أن تسبب في التسبب في العمل، لكنني أحتاج إلى Translate3D () لتكون هناك لأغراض الرسوم المتحركة.

وقائي شكرا للمساعدة.

Answer 1

كنت أفكر في هذا الخطأ في الكروم، وبالفعل هناك مشكلتان مفتوحان فيما يتعلق به (http://code.google.com/p/chromium/issues/detail؟id=116710 و http://code.google.com/p/chromium/issues/detail؟id=102673 ).فايرفوكس يعرض نفس السلوك.

طريقة Safari للقيام بذلك منطقي ... عندما تقوم بتدوير صورة المقدمة في مساحة ثلاثية الأبعاد، يجب مقطع عبر الصورة الموجودة خلفها، لأنها على نفس الطائرة.إذا قمت بتغيير قيمة Translate3D Z على عناصر الأمامية أو الخلفية، فيمكنك نقلها إلى الأمام أو إلى الوراء إلى حيث لا تتقاطع.

دعم المتصفح المتبادل لتحويل ثلاثي الأبعاد ليس للأسف ضعيفا جدا، حظا سعيدا!