לגלול צללים? פרלקס CSS טהור? משחק חוזר לפעול. PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

לגלול צללים? פרלקס CSS טהור? משחק חוזר לפעול.

כריס שיחות צללי גלילה אחד ה-CSS-Tricks האהובים עליו בכל הזמנים. לאה וורו פופולרית גישת ה-CSS הטהורה באמצעות ארבעה מעברי רקע שכבות עם קצת חכם background-attachment קֶסֶם. התוצאה היא אינטראקציית גלילה חלקה שנותנת למשתמשים רמז לכך שתוכן נוסף זמין במיכל הניתן לגלילה.

רק בעיה אחת: זה פרצתי ב-Safari iOS 13. יום אחד הכל היה טוב. הבא, לא כל כך. וזה לא היה הדבר היחיד שהושפע. אפקט הפרלקסה של קית' קלארק של CSS בלבד גם הפסיק לעבוד בדיוק אז.

ובכן, קורא רונלד כתב לומר שהכל עובד שוב! למעשה, אני כותב את זה באייפד שלי (Safari 15.5) עכשיו וההדגמה של כריס נראית חדה כתמיד. כך גם של קית' הדגמה מקורית.

אז מה שבר את זה? אנחנו עדיין לא יודעים. אבל ה הערות שחרור של Safari 13 להציע רמזים:

  • נוספה תמיכה בגלילה מואצת באצבע אחת לכל הפריימים ו overflow:scroll אלמנטים המבטלים את הצורך בכך set-webkit-overflow-scrolling: touch.
  • שינה את התנהגות ברירת המחדל ב-iPad עבור דפי אינטרנט רחבים עם מטא-תגים רספונסיביים הדורשים גלילה אופקית. דפים מותאמים כדי למנוע גלילה אופקית וכל טקסט משתנה כדי לשמור על קריאות.

מתי זה תוקן ומה תיקן את זה? ובכן, בצד צל הגלילה, ה-Safari 15.4 כלול קצת עבודה על background-attachment: local זה אולי עשה את העבודה. בצד הפרלקס, Safari 14.1 הוסיף תמיכה במאפייני טרנספורמציה בודדים... אז אולי זה?

בול זמן:

עוד מ טריקים של CSS