Position sticky + RTL + Box-shadow 在 Edge 上中断

Question

以下代码在 Chrome 上运行良好，但在 Edge 上 Sticky 元素不合适

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

边缘结果：

我注意到如果我从粘性组件中删除 box-shadow 或从 body 中删除 dir=rtl 。一切都按预期工作。

Answer 1

这似乎是 Edge 中的一个错误，在调整 window 的大小后，例如jsFiddle，它会自行纠正。

Edge 也做了什么，在 body 上设置了 dir="trl"，它在视口的左侧呈现滚动条，例如Chrome 和 Firefox 都没有。

一个变通的方法是不在 body 上与 dir=rtl 交换位置，而是使用 Flexbox 自己的 order 属性，然后设置 direction 在内部元素上控制流。

Fiddle demo

堆栈片段

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

根据评论更新。

经过更多的测试和研究，尝试将显然会导致此问题的 box-shadow 移动到内部元素，如伪，仍然偏移 .sticky 元素。

所以两个简单的解决方案，dir="rtl" 可以保留在 body 上，要么使用伪图像，要么使用图像创建阴影，或者如下例所示，使用 filter 属性.

这里我使用了一个CSS的技巧，只在Edge上应用，但它可以完全替代box-shadow，具体要走哪条路，更多的是需要支持多旧的浏览器。

Fiddle demo 2

堆栈片段 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>

Position sticky + RTL + Box-shadow 在 Edge 上中断

Position sticky + RTL + Box-shadow breaks on Edge

sticky

right-to-left

flexbox

box-shadow

microsoft-edge