为何给scrollport加内边距会改变粘性元素的粘滞阈值位置？

根据我对CSS粘性定位机制的理解：粘性元素的inset属性（top/bottom/left/right）是相对于最近的scrollport（滚动容器的视口）边缘计算的，以此形成Sticky View Rectangle (SVR)，SVR的边缘决定了粘性元素的粘滞触发阈值。

CSS规范明确定义：

滚动容器的视觉“视口”（即scrollport）与其内边距盒重合；元素的nearest scrollport是最近滚动容器祖先的scrollport。

无内边距示例 #

CSS代码 #

.scrollport {
  width: 70%;
  height: 250px;
  overflow: auto;
}
.filler {
  height: 110%;
  background-color: aqua;
}
.container-filler {
  height: 100px;
  background-color: red;
}
.sticky {
  position: sticky;
  top: 0px;
  bottom: 0px;
  border: 3px solid slateblue;
}

HTML代码 #

<div class="scrollport">
  <div class="filler"></div>
  <div class="container">
    <div class="container-filler"></div>
    <div class="sticky">Sticky Element</div>
    <div class="container-filler"></div>
  </div>
  <div class="filler"></div>
</div>

此示例中，top和bottom设为0px，SVR与scrollport完全重合，粘性元素的粘滞行为符合预期。

添加内边距示例 #

CSS代码 #

.scrollport {
  width: 70%;
  height: 250px;
  padding: 20px 0;
  overflow: auto;
}
.filler {
  height: 110%;
  background-color: aqua;
}
.container-filler {
  height: 100px;
  background-color: red;
}
.sticky {
  position: sticky;
  top: 0px;
  bottom: 0px;
  border: 3px solid slateblue;
}

HTML代码 #

<div class="scrollport">
  <div class="filler"></div>
  <div class="container">
    <div class="container-filler"></div>
    <div class="sticky">Sticky Element</div>
    <div class="container-filler"></div>
  </div>
  <div class="filler"></div>
</div>

给滚动容器添加上下内边距后，SVR的边缘不再与scrollport重合，粘性元素未按预期阈值触发粘滞——实际表现为inset值基于滚动容器的内容盒而非规范中定义的内边距盒。

疑问 #

这种行为是否与CSS规范矛盾？是否是我对规范的理解存在偏差？规范中有没有相关的补充说明可以解释这一现象？

内容的提问来源于stack exchange，提问作者Perspicacious