التغلب على قيود حجم الخلفية: الغطاء في Mobile Safari

تمثل أجهزة iOS تحديًا فريدًا عندما يتعلق الأمر بتنفيذ صور الخلفية التي قم بتغطية العناصر بأكملها باستخدام حجم الخلفية: الغلاف. على الرغم من السلوك المتوقع، غالبًا ما تؤدي هذه الخاصية إلى نتائج غير مرغوب فيها على هذه الأنظمة الأساسية.

لمعالجة هذه المشكلة، ظهر حل بديل ذكي. من خلال ضبط خاصية مرفق الخلفية للتمرير داخل استعلام الوسائط الذي يستهدف أجهزة iPhone على وجه التحديد، يمكن تصحيح السلوك الإشكالي.

إليك نسخة محدثة من الكود المقدم:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

من خلال تضمين استعلام الوسائط هذا، يتم تعيين خاصية مرفق الخلفية للتمرير فقط للأجهزة التي يقل عرضها عن أو يساوي متغير @iphone-screen المحدد مسبقًا. وهذا يضمن أن صور الخلفية تتصرف كما هو متوقع على أجهزة iPhone مع الحفاظ على موضعها الثابت على الشاشات الأكبر حجمًا.

يوفر هذا الحل طريقة بسيطة وأنيقة للتعامل مع هذه المشكلة الشائعة، مما يسمح لك بإنشاء صور خلفية سلسة كاملة العرض. على جميع الأجهزة، بما في ذلك iOS.