position sticky breaks with combination of rtl & box-shadow

Confirmed Issue #15754013

Details

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 to “Confirmed”

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

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

Sign in