R041: عناصر ظاهرة تحمل نصًا متراكبة

ما الذي يتجاهله عمدًا

العناصر السطرية، فصناديقها تمتد عبر الأسطر الملتفة وتتراكب مصادفةً؛ والصناديق الأصغر من 8px، كالتسميات المخفية بصريًا؛ والطبقات العلوية، وكل ما هو خارج الشاشة، كدرج مغلق؛ والكتلتان اللتان تغطي إحداهما الأخرى كلها تقريبًا، فهكذا تكدّس عروض الشرائح شرائحها. حتى ثماني حالات تراكب في الصفحة.

قبل الإصلاح وبعده

.price-tag {
  position: absolute;
  left: -24px;
}

.price-tag {
  position: absolute;
  inset-inline-start: -24px;
}

افحصه يدويًا

شغّل document.head.insertAdjacentHTML('beforeend', '<style>* { outline: 1px solid rgb(255 0 0 / 0.5) }</style>') في وحدة تحكم DevTools لترسم حدًا حول كل صندوق، وابحث عن حدود تعبر فوق النص. حدّد أحد الزوجين وافحص هامشه وموضعه في لوحة Computed.

ما يعرضه لك التقرير

تحمل كل ملاحظة من R041 ما ينطبق عليها من الحقول أدناه، فترى سبب ظهورها دون إعادة الفحص.

overlapsWith

محدِّد الكتلة الأخرى.

overlapPx

حجم التراكب، العرض والارتفاع بالبكسل.

overlapRatio

التراكب نسبةً من الكتلة الأصغر، من 0 إلى 1.

textA

بداية نص الكتلة الأصغر.

textB

بداية نص الكتلة الأخرى.