Css 为什么在具有混合模式属性的元素中出现边框？

我正在尝试使用混合模式：screen将div放入形状中。虽然在大屏幕上使用chrome Responsive工具看起来不错，但有些屏幕上显示的是这样的，有没有办法去除这些边框

这是我的密码

 .banner-img {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    background-size: 100% 100%;
    margin-left: -75px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: rgba(51,51,51,0.8);
    background-blend-mode: overlay;
  
    &::before{
      content: "";
       position: absolute;
       height: 100%;
       top: 0;
       left: 0;
       width: 100%;
       background-image: url('../../../Assets/mask.jpg');
       background-size: 100% 100%;
       border: none;
       mix-blend-mode: screen;
 
    }

 <div className={`banner-content ${props.styles}`}>
      <div className="banner-img" style={{ backgroundImage: `url(${props.img})` }}>
        <div className="content">{<props.content />}</div>
      </div>
      <div className="content">{props.children}</div>
    </div>

.banner img{
宽度：100%；
最大宽度：1000px；
身高：100%；
背景大小：100%100%；
左边距：-75px；
显示器：flex；
对齐项目：居中；
位置：相对位置；
背景色：rgba（51,51,51,0.8）；
背景混合模式：叠加；
&：：之前{
内容：“；
位置：绝对位置；
身高：100%；
排名：0；
左：0；
宽度：100%；
背景图像：url（'../../../Assets/mask.jpg'）；
背景大小：100%100%；
边界：无；
混合模式：屏幕；
}
{}
{props.children}

---

更新：此答案中的原始“修复”隐藏了边框，但改变了形状。@阿尔弗雷德发现将高度更改为calc（100%+1px）而不是101%解决了问题-既隐藏了边框，又保持了正确的形状

以下是最初的答案和对原因的猜测：

这不是问题的完整答案，因为我无法在我拥有的任何设备上重现问题。但我以前见过类似的问题，其中两个图像没有完全重叠。这可能是因为CSS和实际设备像素（可以是几个像素组成一个CSS像素）之间不匹配但这只是一种猜测

你能试试这个实验吗？在一个你能看到问题的设备上，也可以在SCS中只更改一个设置的情况下运行它。这是为了看看我们是否能让遮罩拉伸到刚好超出基础图像的范围，这样就不会留下一条银条

&::before{
  content: "";
   position: absolute;
   height: 100%;/**CHANGE TO 101% (original answer) now calc(100% + 1px) **/
   top: 0;
   left: 0;
   width: 100%;
   background-image: url('../../../Assets/mask.jpg');
   background-size: 100% 100%;
   border: none;
   mix-blend-mode: screen;
 
}

---

你能把图像和掩码放在一起吗？@AHaworth我把它放在jsfiddle里，虽然我看不到边界，但有什么可能？我真的不知道，但我看到过图像不完全对齐的问题，可能是当CSS像素是多个设备像素和某种“lef”时需要的算法t在后面，但我猜。我会看一看。添加高度101%会隐藏边框，但会使形状失去形状，而不是圆形，它会变成正方形，使其计算（100%+1px）通过隐藏边界和保持原始形状来解决问题，多亏了汉克斯，我应该想到这一点。有趣的是，在我见过的其他情况下可能会有所帮助。