css - 在 Microsoft Edge 中，粘性定位与 dir "rtl"属性结合使用时不起作用

Question

我正在使用 gatsbyJS 构建一个静态站点。我想要一个粘性侧边栏。 position: sticky 适用于 Chrome 和 Firefox，但在 Microsoft Edge 17 上不显示边栏。这是因为我的 html 标签中有一个 dir="rtl" 属性。我需要做什么才能在边缘具有 rtl 目录的粘性元素？

我的侧边栏组件嵌套在一个布局组件中，它使用 Bootstrap 来布局页面。我知道不同的可能的 polyfill，我还编写了一些 js 以使其在 position: fixed 下看起来不错。但对于我在 caniuse.com 中看到的内容以及其他应该支持的地方。所以我想知道我做错了什么或者这是一个未检测到的错误？

这是我的代码。

sidebar.js:

const Sidebar ({ sidebarMenus }) => (
  <div id="sidebar" className="sidebar">
    <Menus menuList={sidebarMenus}/>
  </div>
)

sidebar.css:

.sidebar {
  display: none;
  position: -webkit-sticky;
          position: sticky;
  top: 20%;
  z-index: 1;
  margin-right: 35px;
  max-width: 155px;
}

@media only screen and (min-width: 770px) {
  .sidebar {
    display: block;
  }
}

页面布局.js:

const PageLayout = (props) => (
  <div className="container">
    <div className="row">
      <div className="col col-12 col-md-9">
        {props.children}
      </div>
      <div className="col col-0 col-md-3">
        <Sidebar page={props.page}/>
      </div>
    </div>
  </div>
)

注意:除了引导类之外，没有用于布局的 css。

在边缘加载页面时，侧边栏不会出现。它在 DOM 中可见，我可以看到它在开发工具中表现得像粘性，但它没有显示。它仅在我将目录更改为默认 ltr 时显示。非常感谢任何有关导致此问题的帮助。

更新:显然这是一个已知错误:https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/

Answer 1

MS Edge 中存在一个错误，当 html 或 body 元素具有 dir="rtl" 属性时，它会阻止使用粘性位置属性。查看 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/ 的讨论.
正如那里提到的，如果 dir="rtl" 属性设置在 body 的子元素上，一切正常。
因此解决方法非常简单:只需将 dir="rtl" 设置为包装所有需要放在 rtl 中的页面的任何容器 div(或其他元素)。< br/>我希望这对某人有所帮助。