--header-offset بطيء في سفاري مع العناصر اللاصقة (iPadOS 15.6)

العناصر الثابتة (CSS position: sticky) في Discourse كانت دائمًا مزعجة بعض الشيء على جهاز iPad الخاص بي (الجيل التاسع، كل شيء محدث). ترتجف قليلاً عند التمرير، وتستجيب بشكل سيء، مع تأخير، لتغيير مفاجئ في اتجاه التمرير.

مع تقديم الشريط الجانبي الجديد (وهو أيضًا عنصر ثابت)، أصبح الأمر أكثر إزعاجًا، نظرًا لأنه جزء كبير من واجهة المستخدم غير مستقر تمامًا.

المذنب هو المتغير --header-offset. إزالة هذا المتغير في CSS يجعل العناصر الثابتة لواجهة المستخدم مستقرة، كما ينبغي.

يبلغ ارتفاع الرأس 4em افتراضيًا. استبدلت المتغير --header-offset في CSS لـ Timeline و Sticky-avatar والشريط الجانبي بـ 4em لحساب موضعها:

.d-header
{
    box-sizing: border-box;
    height: 4em;
}

.sidebar-wrapper
{
    top: 4em;
    height: calc(100vh - 4em);
}

@media screen and (min-width: 925px)
{
.container.posts .topic-navigation
    {
        top: 6em;
    }
}

.topic-post.sticky-avatar .topic-avatar
{
    top: 3.75em;
}

(box sizing موجود لأنه لدي حدود على رأسي، لا علاقة له بالموضوع)

أنا مهتم بوظيفة هذا المتغير، فالرأس لا يتغير ارتفاعه أبدًا على حد علمي، بخلاف تغيير حجم النص، واستخدام em لارتفاعه يعتني بذلك.

لا أعرف ما إذا كانت هناك طريقة لتحسين --header-offset على Safari mobile، لكن حلي يصلح مشكلة الأداء الصغيرة هذه. يبدو Discourse أكثر أناقة بكثير عندما تكون العناصر الثابتة ثابتة حقًا :slight_smile:

(ليس لدي أي مشكلة مع هذه العناصر على Firefox أو Chrome على مكتبي، لذلك قد تكون هذه مشكلة في Safari)

إعجاب واحد (1)

يميل هذا إلى أن يكون متعلقًا بالسمات المخصصة، ولكن كما لاحظت، هناك أيضًا حالات مثل حجم الخط التي يمكن أن تؤثر على ارتفاع الـ Header. في الحالات التي يكون فيها الـ Header أطول أو أقصر من الافتراضي، نقوم بحساب الـ header-offset في JS لضبط العناصر الأخرى في الصفحة حتى لا تقع تحت الـ Header.

على أي حال، يمكنني رؤية المشكلة، وهذا بالتأكيد مزعج:

ولكن إذا قمت بتعيين --header-offset إلى قيمة ثابتة في CSS:

ربما نقوم بحساب وتحديث الـ offset كثيرًا جدًا؟ سنقوم ببعض التحقيقات… يقوم Safari على iOS بالكثير من التحسينات التي قد تسبب مشاكل.

4 إعجابات

لقد أضفت للتو إصلاحًا لهذا: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub
يرجى تجربته وإخباري إذا كان يصلح مشكلاتك، @vincefrommtl.

7 إعجابات

لقد نجح هذا بشكل مثالي، شكرًا جزيلاً لك :slight_smile:

إعجابَين (2)

تم إغلاق هذا الموضوع تلقائيًا بعد 4 أيام. لم تعد الردود الجديدة مسموحًا بها.