javascript - CSS Transition 在增加高度时不更新背景颜色

Question

非常简单。我有一个白色背景的页面。当我单击一个按钮时，会显示一个显示内容的 div，而 div 后面的背景会变暗。我有一个 2 秒过渡的暗淡电影效果。
当 div 中的信息不超过浏览器的既定高度时，dim 工作正常。然而，如果 div 框增加了浏览器的高度，当前显示给用户的新高度的任何部分，在转换过程中，都不会变暗(即它保持白色)。如果在效果期间新高度的一部分低于浏览器窗口，并且如果您向下滚动，它会停止那部分窗口过渡。否则，如果在过渡期间看不到新的高度部分，它会一直变暗。
好像它不能在被看到时绘制背景变化，这看起来很傻。 这是我的代码:

CSS #body-back 是body标签的id

#body-back {
  -webkit-transition: background 2s ease-in-out;
  -moz-transition: background 2s ease-in-out;
  -ms-transition: background 2s ease-in-out;
  -o-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;
}

JS

<script>
pop = function() {
  var back = document.getElementById('body-back');
  back.style.background = "rgba(0,0,0,0.8)";
}
popaway = function() {
  var back = document.getElementById('body-back');
  back.style.background = "rgba(0,0,0,0)";
}

#Show the div box            
$( "#button" ).click(function( e ) {
  e.stopPropagation();
  $("#divbox").toggle();
  pop();
});

$( "#divbox" ).on('click',function( e ) {
  e.stopPropagation();
});

#Hide the div box if user clicks outside of div box
$( document ).on('click', function( e ) {
  if( e.target.id != 'divbox' ){
    $( "#divbox" ).hide();
    popaway();
  }   
});
</script>

另请注意，当我没有过渡背景而只有一个基本开关时，即使在任何新的浏览器高度空间上，它也能完美呈现。 关于为什么它不想利用暴露的新空间有什么想法吗？谢谢大家!

编辑 我一直在 Chrome 中运行它，但只是在 Safari 中尝试过。对于 Safari，即使新的高度超出屏幕，它仍然不会绘制更新的背景。

编辑 2 - Div 框 CSS

.popup {
  position:absolute;
  left:0px;
  margin-left:100px;
  margin-right:100px;
  width:85%;
  font-family:verdana;
  font-size:13px;
  padding:10px;
  background-color:white;
  border:2px solid grey;
  z-index:100000000000000000;
  display:none;
}

Answer 1

position: absolute 不会影响父元素的高度。固定位置将使其覆盖在顶部，完全忽略页面的滚动。

听起来这对你有用

.popup {
   top: 50px; 
   position:fixed; /* sit on top of everything, ignore scrolling on the body*/
   overflow:scroll;
   width:70%;
}

默认情况下， body 应该占据 100% 的高度，不知道为什么以前没有发生这种情况。

很高兴它奏效了，我最终可以提供帮助!