Offcanvas navigation not functioning properly when using right-to-left direction

A webpage I created has two offcanvas menus, one on each side. They function properly when in English, but I also need to support Arabic. To do so, I added dir="rtl" to the html tag. However, the right offcanvas menu displays strange behavior in Chrome - it seems to be a repaint issue. The menu sometimes shifts into the correct position when I resize the window, or even randomly after a few seconds.

I utilized transform: translateX(); and transform: translate3d(); on the body element to achieve this effect. Upon review, everything appears to be configured correctly.

You can view an example showcasing this bug on Codepen here: http://codepen.io/Ghostavio/pen/WbgXXZ

csstransformcss-transitionstranslate-animation

Answer №1

I've made a simple adjustment that I believe will solve your issue

The change I implemented fixes the body position

Here is the updated CSS:

  box-sizing: border-box
body
  padding: 5%
  position: fixed    /*Modified 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

I trust this solution meets your needs.

Answer №2

When I encountered a similar predicament while trying to create a persistent header for a horizontally scrolling table in RTL, I discovered that in order to make position : sticky function properly for RTL without relying on JavaScript, I needed to apply z-index to both the sticky column (the sticky header) and the scrollable columns.

Initially, I resorted to using JavaScript to organize everything and introduce offset padding to achieve the sticky header effect. However, it was only after taking a break out of frustration and revisiting the problem days later that I devised a solution using CSS alone.

Check out this JSfiddle demonstration

Answer №3

After coming back to this code years later, I have found that the code on codepen is functioning perfectly. This leads me to believe that the problem may have been with Chrome at the time of the original question. I am leaving this here for reference, but it appears that the issue has fixed itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS to load a backgroundImage in Spring MVC for JS file interns is essential

I have implemented the Spring-MVC structure in my project, where I have configured static resource handling successfully. This allows me to access CSS, JS, and images within my JSP pages without any issues. However, I am currently facing a problem while t ...

javascriptjqueryhtmlcssspring-mvc

Press the [Submit] button to conceal DIV Container 1, reveal DIV Container 2, and populate DIVs discovered in a .PHP file within DIV Container 2

Trying to achieve the following steps: 1 - Press Submit Button 2 - Conceal DIV Container 1 3 - Reveal DIV Container 2 4 - Load and display all DIVs from "PricingDisclaimer.php" into Div Container 2 DIV Code snippet: <div id="MainContainer"> &l ...

javascriptphpjqueryhtmlcss

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Working with the WebCalendar app found at to make some personalized adjustments to how extra fields function. I've set up two additional fields: one is a dropdown list of counties, and the other is a text field. Within the dropdown list, there is an ...

phpjavascriptjqueryhtmlcss

I noticed that my Stack Slider text is appearing blurry, and the navigation seems to be not looping properly

I have implemented the stack slider plugin for my website, which can be found at this link: https://github.com/dpesofficial/stack-slider Although most of the changes I made in HTML and CSS are working correctly, there are a few issues that need to be addr ...

jqueryhtmlcss

Enhance the performance of jQuery and CSS on your WordPress site

I'm currently working on a WordPress 4.3 website that utilizes over 20 plugins, each loading CSS and jQuery on every page. My main concern is how to optimize the styles and jQuery so that only the necessary ones are loaded on each page. I've at ...

jquerycsswordpressplugins

Styling a Bootstrap dropdown menu so that an input field within it only accepts numeric digits

I am facing an issue with my input field inside a dropdown styled with CSS and I am using Bootstrap 4. When I try to enter characters, it does not work but I can input numbers without any problem. How can I resolve this? <script src="https://cdnjs.cl ...

htmlcssbootstrap-4

Using only CSS to swap out periods in OL>LI elements for a different style

Is there a way to customize the punctuation used in lists in HTML and CSS? For instance, can the standard period at the end of list items be changed to a right parenthesis or removed altogether? Concept Below is an example of improper CSS attempting to a ...

htmlcssstyleshtml-lists

Persistent table header and fixed column in table

Trying to create an HTML table with a fixed header and fixed first two columns, but encountering issues with the table displaying at the top of the page instead of below a div with a yellow background. Looking for a solution similar to the one shown in the ...

javascriptjquerycss

CSS: concealing certain portions of an element's content

I don't have control over the following markup: <p class="filename"> <img src="http://domain.com/uploads/image_gallery/_thumbs/Chrysanthemum.jpg" alt="Chrysanthemum.jpg"> <br> Chrysanthemum.jpg </p> Is it possible ...

css

What impact does the use of CSS in emails have on various email clients and reading formats?

As I delve into customizing my very first (woocommerce) email template, I am considering the option of concealing data using CSS display: none. However, a few questions arise regarding the compatibility and support of CSS and display: none: Do all email ...

htmlcssemailhtml-email

Apply box shadow to a transformed box

I have been working on creating a three-dimensional book using only CSS. I am now at the final stage, where I need to add box-shadow to it. How can I apply box-shadow:10px 10px 30px rgba(0,0,0,0.3) to achieve the desired effect? Should I make adjustments ...

htmlcss

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

htmlcssflexbox

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

Utilizing nested flex containers with overflow-x property

I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-sc ...

htmlcss

The challenge of margin collapse

I am currently working on resolving a margin collapse issue. I am puzzled by the overlapping paragraphs and I really need to understand why this problem is happening. I suspect it may be a collapsing margin issue. Please take a look below: https://i.sta ...

htmlcss

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Having trouble with loading background images in the style tag of Vue.js. Can anyone offer a solution?

I have exhausted all options in my Vue app, but I am still unable to load the background image in my app.vue file. Despite getting the .html file to work with it, the image just won't show up. I've scoured the internet for solutions without succe ...

javascripthtmlcssvue.jsvuejs3

Display a PDF on a website and ensure it is horizontally scrolled to the center

After embedding a PDF in a webpage, I noticed that the width of the window is smaller than the actual PDF, resulting in a horizontal scroll bar appearing. Surprisingly, the PDF itself has wide margins on both sides, making it challenging for users to view ...

javascriptjqueryhtmlcsspdf

Expanding the ul height with animation when the page loads

Hi there, I am a beginner looking to create a ul list that increases its height with animation when the page loads. Can this be achieved with CSS? Any assistance would be greatly appreciated. <ul> <li><a href="/">title 1</a>& ...

javascriptjqueryhtmlcss

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...

javascriptjquerycss