CODEWITHSUNDEEP
csstransformcss-transitionstranslate-animation
Gustavo Siqueira
Gustavo Siqueira

Reputation: 862

Offcanvas menu not working with direction rtl

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

Upvotes: 2

Views: 1263

Answers (3)

Gustavo Siqueira
Gustavo Siqueira

Reputation: 862

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.

Upvotes: 0

Eugene
Eugene

Reputation: 604

I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.

At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.

JSfiddle example

Upvotes: 1

Anjula Ranasinghe
Anjula Ranasinghe

Reputation: 584

Its a simple thing I did Hope This is your answer

What I did was made the body position Fixd

in body:

position: fixed

Your New CSS will look like this:

  box-sizing: border-box
body
  padding: 5%
  position: fixed    /*Changed Here*/
  overflow-x: hidden
  transition: .3s ease-in-out transform
  &.left-offcanvas-active
    transform: translateX(270px)
    //transform: translate3d(270px, 0, 0)
  &.right-offcanvas-active
    transform: translateX(-270px)
    //transform: translate3d(-270px, 0, 0)
header
  text-align: center
  position: relative
img, svg
  vertical-align: middle
a
  text-decoration: none
.logo img
  width: 240px
  max-width: 100%
.gc
  fill: #8E8E8E
.content
  text-align: justify
.hamburger-icon
  position: absolute
  top: 10px
  left: 0
  cursor: pointer
.second-icon
  left: auto
  right: 0
.left-offcanvas, .right-offcanvas
  witdh: 270px
  min-width: 270px
  height: 100%
  background-color: #BABACA
  position: fixed
  display: block
  top: 5%
.left-offcanvas
  left: -270px
.right-offcanvas
  right: -270px
.offcanvas-links  
  display: block
  padding: 20px
  color: #117EBF
  border-bottom: 1px solid #E1E1E1
  font-weight: 800
  text-decoration: none
  span
    background-color: #C80428
    color: #FFF
    padding: 0 5px
    border-radius: 2px
    font-weight: 400
    float: right

Hope this helps you.

Upvotes: 1

Related Questions