R033: translateX تُخرج العنصر من الشاشة في الاتجاه من اليمين إلى اليسار

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

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

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

.drawer {
  position: fixed;
  left: 0;
  transform: translateX(-100%);
}

.drawer {
  position: fixed;
  inset-inline-start: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .drawer {
  transform: translateX(100%);
}

افحصه يدويًا

أغلق اللوحة، وحدّدها، وشغّل [getComputedStyle($0).transform, $0.getBoundingClientRect().x, innerWidth] في وحدة تحكم DevTools. القيمة x الأقل من سالب عرض العنصر تعني أنه يستقر خارج الحافة اليسرى؛ على صفحة من اليمين إلى اليسار يجب أن يستقر الدرج خارج اليمين.

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

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

translateXpx

الإزاحة الجانبية، بالبكسل.

rect

موضع استقرار العنصر، مع تطبيق التحويل.

viewportWidth

عرض نافذة العرض التي قيس فيها.

anchoredSide

الجانب الذي يقع عليه دون التحويل.

parkedSide

الجانب الذي يستقر خارجه مع التحويل.

note

تذكير بأن هذا استدلال، يُتحقق منه مقابل الحركة.