العناصر الثابتة (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 أكثر أناقة بكثير عندما تكون العناصر الثابتة ثابتة حقًا ![]()
(ليس لدي أي مشكلة مع هذه العناصر على Firefox أو Chrome على مكتبي، لذلك قد تكون هذه مشكلة في Safari)