Skip to content
ENالعربية

R033: translateX moves the element off-screen in RTL

Off-canvas drawers and menus should wait behind the right edge on an Arabic page, so one parked off the left by translateX slides in from the side the reader does not expect.

The check

Id
R033
Category
Physical CSS
Default severity
low

When it fires

  1. lowlow confidence

    On a right-to-left page, a translateX of 40px or more parks a visible element off screen where it would sit inside the viewport without the transform, in one of two shapes: resting off the left edge, like a left-to-right drawer never mirrored, or thrown from the left clear across the viewport to rest off the right, which no slide-in intends. It reports evidence to verify, at low confidence, and suggests no fix.

What it leaves alone

A panel anchored on the right and parked off the right edge, which is the correct resting place on a right-to-left page; translates under 40px; and elements on screen, or off screen even without the transform.

Broken, then fixed

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

Check it by hand

Close the panel, select it, and run [getComputedStyle($0).transform, $0.getBoundingClientRect().x, innerWidth] in the DevTools console. An x below minus the element's width means it rests off the left edge; on a right-to-left page a drawer should rest off the right.

What the report shows you

Each R033 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

translateXpx
The sideways translate, in pixels.
rect
Where the element rests, with the transform applied.
viewportWidth
The width of the viewport it was measured in.
anchoredSide
The side it sits on without the transform.
parkedSide
The side it rests off with the transform.
note
A reminder that this is a heuristic, to check against the animation.

More physical CSS checks

Does your page trip R033?

Paste a URL. Ritla renders the page on desktop, tablet and mobile, runs every check, and shows the top issues with screenshot evidence.

Scan a page freeBrowse the checks