In Microsoft Edge, sticky positioning doesn't work when combined with dir "rtl" attribute

Question

I'm building a static site using gatsbyJS. i want to have a sticky sidebar. position: sticky works fine for Chrome and Firefox, but on Microsoft Edge 17 the sidebar is not displaying. This is because I have a dir="rtl" attr in my html tag. what do i need to do to have a sticky element with rtl dir in edge?

my sidebar component is nested in a layout component, which uses bootstrap to layout the page. I know about different possible polyfills, and I've also written some js to make it look ok with position: fixed. but for what i see in caniuse.com and other places it's supposed to be supported. So I'm wondering what am I doing wrong or is it an undetected bug?

here's my code.

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;
  }
}

pageLayout.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>
)

Note: There's no css for the layout other than the bootstrap classes.

When loading the page in edge the sidebar just doesn't appear. It's visible in the DOM, and I can see it behaving as sticky in the dev tools, but it is not displaying. It's displaying only when i change my dir to the default ltr. Any help on what is causing this will be greatly appreciated.

update: apparently it's a known bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/

Answer 1

There's a bug in MS Edge that prevents using the sticky position property while either of the html or body elements have a dir="rtl" attribute. Check the discussion at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/.
As mentioned there, everything works fine if the dir="rtl" attr is set on a child element of the body.
So the workaround is quite simple: just set dir="rtl" to any container div (or other element) that's wrapping all the pages that needs to be in rtl.
I hope this helps someone.