CSS自定义背景可滚动容器垂直滚动条变透明问题问询

我正在排查我的垂直滚动条为何变为透明：

相关代码如下：
SCSS代码：

$background-image-with-gradient: 
    linear-gradient(
        to right top, 
        rgba(248, 12, 12, 0.235), 
        rgba(17, 226, 128, 0.235)),
        url("https://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg");

@mixin pseudo-element-background {
    content: ""; 
    background-size: cover;
    background-position: top; /* 调整窗口大小时，图片顶部始终贴合容器顶部 */
    //background-attachment: fixed;
    position: absolute;
    top: 0px;
    right: 0px;
    //bottom: 0px;
    left: 0px;
    height: 100%;
    z-index: -1;
}

.outer {
  width: 30em;
}

.auth-form-frame-container {
    display: block;
    border-radius: 1em;
    box-shadow: 0 2em 4em rgba(black, 0.4);
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

.auth-form-frame {
    position: relative;
    padding: 1em;
    
    &:before {
        @include pseudo-element-background;
        background-image: $background-image-with-gradient;
        background-position: center;  
    }
}

HTML代码：

<div class="outer">
<div class="auth-form-frame-container">
  <div class="auth-form-frame">
    <h1>Line 1</h1>
    <h1>Line 2</h1>
    <h1>Line 3</h1>
    <h1>Line 4</h1>
    <h1>Line 5</h1>
    <h1>Line 6</h1>
    <h1>Line 7</h1>
    <h1>Line 8</h1>
  </div> 
</div>
</div>

我已将原本的input元素替换为h1标题，实际内容对该问题无影响。我将上述代码放到Codepen中运行时，滚动条显示完全正常：

请问什么因素会导致我的网站中该滚动条变为透明？

可能原因及解决方法 #

你可以从以下几个方向排查问题：

• 全局自定义滚动条样式覆盖：你的自有站点大概率存在全局的::-webkit-scrollbar系列自定义样式，将滚动条轨道或滑块的背景设置为了透明色/和容器背景高度接近的颜色，而Codepen默认没有这类全局样式覆盖，因此运行正常。你可以打开浏览器控制台的元素面板，选中.auth-form-frame-container元素，查看其伪元素样式列表中是否存在自定义滚动条的相关规则。
• 层叠上下文冲突：auth-form-frame的::before伪元素z-index设置为-1，如果.auth-form-frame-container没有创建独立的层叠上下文，滚动条作为容器的原生渲染控件，可能被低层级的背景穿透，视觉上呈现透明效果。你可以给.auth-form-frame-container添加position: relative和z-index: 1属性，强制它在独立层叠上下文中渲染滚动条。
• 浏览器差异：你本地运行站点的浏览器和打开Codepen的浏览器不一致，或者浏览器本身的滚动条渲染配置被修改，比如部分国产浏览器、高版本Safari的滚动条默认渲染规则和Chrome存在差异。
• 全局样式重置冲突：如果你的站点存在CSS重置规则，或者定义了和滚动条颜色相关的全局CSS变量，也可能清除了滚动条的默认样式。你可以单独给.auth-form-frame-container添加滚动条样式强制覆盖，参考代码如下：

.auth-form-frame-container::-webkit-scrollbar {
  width: 8px;
}
.auth-form-frame-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.2);
  border-radius: 0 1em 1em 0;
}
.auth-form-frame-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
}

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