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

Question

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

我的侧边栏组件嵌套在布局组件中，该组件使用引导程序来布局页面。我知道不同的可能的 polyfills，我还写了一些 js 使它看起来不错position: fixed。但是对于我在caniuse.com和其他地方看到的内容，它应该得到支持。所以我想知道我做错了什么还是一个未被发现的错误？

这是我的代码。

sidebar.js：

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

侧边栏.css：

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

页面布局.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"attr 设置在 body 的子元素上，一切都会正常工作。
因此解决方法非常简单：只需设置dir="rtl"为包装所有需要位于rtl.
我希望这可以帮助别人。