画布外菜单不适用于方向 rtl

Question

我有一个简单的页面，有两个 offcanvas 菜单，一个在哪一侧，它们在英语时都可以正常工作，但由于我还需要支持阿拉伯语，所以我在 html 标签中使用了dir="rtl"，有了它，右侧的 offcanvas 菜单在 Chrome 上有一些奇怪的行为，看起来像是重绘问题， 当我调整窗口大小时，它会转到正确的位置（有时它也会在几秒钟后随机移动）。

我在body中使用transform: translateX();和transform: translate3d();来实现这一点，据我所知，没有任何问题。

下面是该错误的代码笔示例：http://codepen.io/Ghostavio/pen/WbgXXZ

Answer 1

这是我做的一件简单的事情 希望这是你的答案

我所做的是使身体位置固定

在体内：

position: fixed

您的新 CSS 将如下所示：

  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

希望这对你有帮助。

Answer 2

我遇到了类似的问题，在 RTL 的水平滚动表上创建了一个粘性标题。我发现为了让position : sticky在没有 JS 的情况下为 RTL 工作，我必须将z-index分配给粘性列（粘性标题）和可滚动列。

起初，我使用 JS 来定位所有内容并添加偏移填充以获得粘性标题效果。但是在沮丧地走开并在几天后返回之后，我想出了一个唯一的 CSS 解决方案。

JSfiddle 示例

Answer 3

因此，

在多年后重新审视这个问题时，Codepen 上的代码似乎工作得很好，这让我假设在提出这个问题时这是 Chrome 的问题。出于历史原因将其保留在这里，但似乎这个问题自行解决了。