滚动时不考虑阴影

Question

在下图的左侧部分，您可以看到一个对象被放置在容器的右边缘。根据溢出截去部分对象属性，向右水平滚动即可显示

在图片的右侧部分，您可以看到向右滚动后的对象。对象右边缘的阴影被切断。滚动时，仅考虑没有阴影的对象的范围（宽度）。

为对象设置边距或填充值并没有改变行为。 css 属性 scrolling-margin 或 scrolling-padding 的实验也失败了。

此行为已在 Chrome (79.0.3945.88)、Opera 和 Edge 的最新版本 Mac OS.

下测试

我不想在对象周围创建另一个容器来创建 space。有没有其他方法可以避免遮挡阴影？

容器的相关CSS：

margin: 4px;
box-sizing: border-box;
overflow: auto;

对象的相关CSS：

background: lightgreen;
background-clip: padding-box;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: darkslategray;
border-radius: 50%;
box-shadow: 2px 2px 4px gray;
position: absolute;

Answer 1

这个怎么样。在 div 的 ::after 中放置一些东西，并将其稍微向右放置。
这听起来有点乱七八糟，但在我尝试过的所有事情中，这是我可以开始工作的唯一技巧。

/* Change line 34 to see the beauty of flex-design ;-) */

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

nav {
  box-sizing: border-box;
  background-color: yellow;
  opacity: 0.9;
  display: flex;
  align-items: center;
  user-select: none;
  flex: 0 0 35px;
  padding: 5px;
  border-bottom: 4px solid #ddd;
}

main {
  box-sizing: border-box;
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  flex-direction: row; /* row, row-reverse, column, column-reverse */
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

article {
  --raster: 25px;
  --raster-color: #ddd;
  margin: 4px;
  box-sizing: border-box;
  overflow: scroll;
  background-attachment: local;
  background-image: linear-gradient(var(--raster-color) 1px, transparent 1px), linear-gradient(90deg, var(--raster-color) 1px, transparent 1px), linear-gradient(var(--raster-color) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--raster-color) 0.5px, transparent 0.5px);
  background-size: var(--raster) var(--raster), var(--raster) var(--raster), 5px 5px, 5px 5px;
  flex: 3 1 75%;
  align-self: auto;
  position: relative;
}

section {
  box-sizing: border-box;
  background-color: #ddd;
  flex: 0 0 4px;
  cursor: col-resize;
}

aside {
  box-sizing: border-box;
  background-color: lightgray;
  overflow: scroll;
  flex: 1 1 calc(25% + 10px); /* resizing */
  align-self: auto;
  margin: 4px;
  padding: 5px;
}

article div {
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  box-shadow: 4px 4px 8px gray;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  color: white;
}

/* Trick goes here */
article div::after {
  position: absolute; bottom:-8px; right: -8px;
  display: inline; content: '[=10=]A0';
}

article div:nth-child(1) {
  left: 500px;
  top: 50px;
}

article div:nth-child(2) {
  left: 350px;
  top: 10px;
}

article div:nth-child(3) {
  left: 175px;
  top: 125px;
}

<nav>
  navigation bar
</nav>
<main>
  <article>
    <div>
      first
    </div>
    <div>
      second
    </div>
    <div>
      third
    </div>
  </article>
  <section></section>
  <aside>
    input area
  </aside>
</main>

滚动时不考虑阴影

Shadow is not taken into account when scrolling

html

css-position

scrollbar

chromium