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 3 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.

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

Sign in