div与其垂直滚动条之间的1-px距离，使彩色背景可见

Question

如果您在整页（运行＆gt;整页）中运行以下代码段，则会在Chrome / Windows中的垂直滚动条附近看到垂直的红色1像素边框。为什么呢？

我找到了解决方法（参见下面的注释2），因此我的目标不仅是避免它，而且要了解这个红色边框的原因。 div #popup和它的滚动条之间通常应该没有距离（或者我错了？）为什么这边界？

＆＃13;

＆＃13;

body, html { height: 100%; width: 100%; }
* { margin: 0; padding: 0; }
#popup { position: fixed; top: 0; left: 10%; width: 80%; height: 100%; background-color: white; z-index: 10; overflow-y: auto; outline: 0; }
#popupmain { height: 100%; width: 100%; font-size: 0.9em; padding: 5%; box-sizing: border-box; outline: 0; border: 0; }
#popupclose { top: 5px; right: 5px; position: fixed; cursor: pointer; color: white; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: red;  }

＆＃13;

<div id="popup">
  <div id="popupmain">
    <p id="popuplongdescription">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a</p>
  </div>
  <div id="popupclose">X</div>  
</div>
<div id="popupdarkbg"></div>

＆＃13;

＆＃13;

＆＃13;

注意：#popupdarkbg div通常为黑色，有一些不透明度：background-color: rgba(0,0,0,.75);，#popup（默认情况下：隐藏）通常是通过点击链接触发/打开的，用Javascript。我在这里删除了这个部分，只显示了这个最小例子中的核心问题。

注意2：删除此边框的解决方案是删除#popupclose div或将其移出#popup div。它有效，但为什么呢？