تأخر التمرير مع خاصية CSS3 Box-Shadow؟

Question

أضفت أ box-shadow إلى قسم من الصفحة مؤخرا لمنحه نفس تأثير الحدود الظل الذي يتم عرضه على تطبيقات Mac OS X. لقد بدا رائعا، لكنني لاحظت أن التمرير لأعلى ولأسفل في الصفحة جعلته تأخرا. عادة ما أرى هذا فقط على الصفحات التي تحتوي على صور خلفية مزعجة وأطنان من الصور ومقاطع الفيديو المضمنة التي تعمل في كل مكان (السعال ماي سبيس السعال). قررت أصلا استخدام مربع الظل منذ أن أحسب أنه سيفعل الحاجة إلى استخدام صورة، والتي من شأنها إزالة أي إمكانية لتخفيض التمرير.

أعلم أن CSS3 لا يزال جديدا، ولكن هذا سبب التأخر؟ هل يتم تقديم برنامج الظل أو شيء ما؟ عندما أقوم بتطبيق ظل المربع إلى عناصر أصغر، لا يتخلف على الإطلاق. أنا فقط أتساءل عما إذا كان أي شخص آخر شهد هذا.

لقد جربتها فقط على صفحة الجبهة الفائضة المكدس، على #content div باستخدام firebug مع إعداد:

-moz-box-shadow: 1px 1px 10px;

ولاحظت بعض تأخير التمرير بعد ذلك. أنا أستخدم Firefox 3.5.

سؤالي هو، ما هي بعض البدائل لاستخدام هذه السمة إذا أردت إضافة حدود نمط Mac OS X إلى قسم من صفحتي؟

في ملاحظة جانبية، هل يعرف أحد إذا كان من الممكن تطبيق ظل المربع فقط على الجانب العلوي واليسار واليمين للعنصر وليس الجزء السفلي؟ حاولت 1px -1px 10px لكنه لا يزال يظهر الظل في الأسفل. إذا استمرت في تقليل الإزاحة الثانية، فإنه يزيل الظهور الظل في النهاية من القاع ولكن بعد ذلك، أصبح الجزء العلوي من الظل أغمق وأكبر.

ونعم، لقد رأيت المقالات على الظل مربع في:

• CSS3 info.
• Fredericiana بلوق

Answer 1

أفضل رهان سيكون للاستخدام -moz-border-image في حين أن. يجب أن يحل كل من مشاكلك.

على سبيل المثال، يمكنك استخدام صورة مثل هذا، ، جنبا إلى جنب مع CSS مثل هذا

-moz-border-image: url(shadow.png) 10 / 10px;

لإنشاء الظل الخاص بك. وبما أنك تستخدم صورة، فيمكنك ترك الظل السفلي أيضا، إذا كنت تريد ذلك.

---

لن تكون قادرا على إزالة الظل من أسفل باستخدام -moz-box-shadow; ؛ لا يطلق عليه اسم "الظل مربع" لا شيء. إنه ينطبق الظل إلى المربع بأكمله. لا يمكنك تحديد ظل لكل جانب مثل border, ، قل. أفضل ما يمكن أن تفعله هو كمان حولها مع وضع، بلمسة وانتشار الظل. ولكن هذا يؤدي حتما إلى ظل أغمق على الجانب الآخر.

أحصل على تأخر الظل مربع أيضا عندما أحاول ذلك على Stackoverflow. يؤثر على الأداء في رحلات السفاري أيضا عندما أحاول -webkit-box-shadow, على الرغم من أنها ليست ملحوظة كما هو الحال في فايرفوكس. نأمل أن يتحسن الأداء في المستقبل، لكنني أفترض أن الظل سيكون دائما بعض التأثير منذ بقدر ما أعرفه يكون البرمجيات المقدمة.

Answer 2

تم إصلاح هذا في Webkit اعتبارا من يومين. :)

https:/bugs.webkit.org/show_bug.cgi؟id=22102.

يمكنك التقاط الكروم ليلا لمحاولة ذلك.

نظرت في FF3.6 و FF4 ولا أرى أداء تمرير فظيع هناك، لذلك قد يتم تناوله هناك أيضا.

Answer 3

لا تزال القضية مستمرة في Chrome لنظام Android اعتبارا من التاريخ الحالي. ينتج عن بعض مجموعات الظل في المربع أداء تمرير ضعيف. في حالتي تكديس اثنين من الظلال الصاخبة (مثل أعلى / أسفل) تؤدي إلى المشكلة الموصوفة. الحل الوحيد الذي يمكنني تقديمه هو جعل الظلال مربع أقل تعقيدا وحاول مرة أخرى ... التي عملت بالنسبة لي. هذا غير مرضي ولكن نعم بدلا من ذلك، يمكنك أيضا استخدام محلول صورة الحدود أو إزالة الظل المربع المتأثر بالكامل. آمل أن يتم إصلاح هذا قريبا، وأخيرا. BTW لا يحتوي إصدار Android من Firefox على المشكلات بعد الآن (ل My CSS3). علاوة على ذلك، لا تتأثر إصدارات سطح المكتب من كلا المتصفحين في حالتي.

Answer 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

نسخة متصفح عبر المتصفح القديم والجديد. IMG بسيط: http://i28.tinypic.com/2njzkt1.png.

نمط :مثبت للصور المتصفح المثقل جدا