Question

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

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

这是错误的代码示例：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 example

Offcanvas菜单无法使用方向rtl

2 个答案: