I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl"
in the html
tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX();
and transform: translate3d();
in the body
to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
So upon revisiting this years later it seems the code on codepen works just fine, which makes me assume it was an issue with Chrome at the time this question was asked. Keeping it here for historical reasons but it seems like this issue resolved itself.