position sticky breaks with combination of rtl & box-shadow

Issue #15754013 • Assigned to Francois R.

Details

Author
רועי נ.
Created
Feb 2, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
41.16299
Reports
Reported by 6 people

Sign in to watch or report this issue.

Steps to reproduce

When I use the following:

HTML:

<body dir="rtl"> <-- Remove rtl or box-shadow to fix issue -->
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="flex sticky">Sticky content here</div>
    </main>
</body>

CSS

.main {
  display: flex;
    max-width: 1200px;
    width: 100%;
  flex-flow: row wrap;
  margin: auto;
  text-align: center;
  font-size: 30px;
}
.sticky {
    width: 300px;
    max-height: 715px;
    position: sticky;
    top: 10px;
    padding: 15px;
    margin: 20px 30px 0 0;
    box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15); /* Remove rtl or box-shadow to fix issue  */
  background: yellow;
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
}

The result is in the attachment.
If you remove the dir=rtl from the body tag or the box-shadow from the content class it starts to work again.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Bogdan B.”

    Changed Status

  • I just duped this against an internal issue tracking the same problem. (This is just a friendly fyi)

  • It seems, that this issue has been resolved in edge 17. Can you confirm this?

  • I’m able to reproduce the same error on Edge 17 but without rtl and absolute positioned div that is right aligned.

    https://codepen.io/dandax/pen/yQOGEM

  • Changed Status

  • @Michael M.
    Sticky doesn’t seem to work at all now.
    When removing dir="rtl", everything works.

    See here: https://codepen.io/atlanteh/pen/QQyLmj

    I tested it on:
    Microsoft Edge 42.17134.1.0
    Microsoft EdgeHTML 17.17134

  • @Michael M.
    Sticky doesn’t seem to work at all now.
    When removing dir="rtl", everything works.

    See here: https://codepen.io/atlanteh/pen/QQyLmj

    I tested it on:
    Microsoft Edge 42.17134.1.0
    Microsoft EdgeHTML 17.17134

  • Whoops yes, you’re right @Dan D., but I think, in Edge16 it was more broken - at least we don’t have a problem with direction="rtl" and position="sticky" in our project anymore in Edge17 (we don’t use box-shadow on the sticky element).

    But this issue still needs to be addressed.

  • Microsoft Edge Team

    Changed Assigned To to “Francois R.”

  • @Michael M, yes I forgot to mention this particularly happens with a box-shadow. The “stuck” div is shifted by the same offset as the box-shadow.

  • Microsoft Edge 44.17763.1.0
    Microsoft EdgeHTML 18.17763

    Horrible bug, guys.
    No box-shadow is needed. Just ‘direction: rtl’ on body tag and block with 'position: sticky’. It looks just transparent. If ‘direction: rtl’ is not on body, but on its child - all ok.

  • Hi everyone,
    I have same issue too, I used sticky position for side menu when I change direction RTL it disappears,
    I hope this issue has been solved and let us know if there is any workaround.
    Thanks

  • Is there any news on this issue or a potential work around? Currently affecting something I am working on and don’t want to bloat my code with hacky fixes.

You need to sign in to your Microsoft account to add a comment.

Sign in