Search code examples
flexboxmicrosoft-edgeright-to-leftstickybox-shadow

Position sticky + RTL + Box-shadow breaks on Edge

The following code works well on Chrome, but on Edge the Sticky element is out of place

.main {
  display: flex;
  max-width: 1200px;
  width: 100%;
  flex-flow: row nowrap;
  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);
  background: yellow;
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
}
<body dir="rtl">
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>

Result in Edge:enter image description here

I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.

Solution

  • It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.

    What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.

    A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.

    Fiddle demo

    Stack snippet

    .main {
  display: flex;
  max-width: 1200px;
  /*width: 100%;                       default  /*
  /*flex-flow: row nowrap;             default  */
  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);
  background: yellow;
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
  order: 1;                         /* added, move last  */
}
    <body>
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>

    Updated based on a comment.

    After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.

    So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.

    Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.

    Fiddle demo 2

    Stack snippet 2

    .main {
  display: flex;
  max-width: 1200px;
  width: 100%;
  flex-flow: row nowrap;
  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);
  background: yellow;
}

/*  CSS to target Edge only  */
@supports (-ms-ime-align: auto) {
  .sticky {
    box-shadow: none;
    filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
  }
}

.content {
  height: 1600px;
  flex: 1 1;
  background: red;
}
    <body dir="rtl">
    <main class="main">
      <div class="content">Scrollable content here</div>
      <div class="sticky">Sticky content here</div>
    </main>
</body>