javascript - 単一の div でスクロールするとオーバーラップが発生する

Question

ポップアップの後ろに透明なdivとしてposition:fixeddivを使用しました。overflow: auto;

問題は、スクロールしてこのポップアップを下または上に表示すると、このオーバーラップが表示されることです。

この div を背景として使用し、このオーバーラップなしでスクロールできるようにするにはどうすればよいですか?

HTML

 <div class="popup_screen_bg">
      <div class="popup_screen">
      <!-- update partner "form" -->
      </div>
  </div>

CSS

.popup_screen_bg{
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  z-index: 1000;
  overflow: auto;
  background: url('popup_transparent.png');
  padding-bottom: 20px;
}

.popup_screen{
  position: absolute;
  min-width: 80%;
  min-height: 80%;
  left: 10%;
  top: 10%;
  background-color: #EEE;
  border: 8px solid rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
   box-shadow: none;
}

注: この問題は Chrome でのみ発生します。