html - 全屏可滚动包装器不兼容浏览器

Question

我想创建一个位于页脚元素之上的全屏 div 元素。全屏 div 元素 (#wrapper) 应该有一个全屏背景图像，它应该是可滚动的以显示放在背景中的页脚。

JSFiddle: https://jsfiddle.net/tvuqzd17/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper { 
	width: 100%;
	min-height: 100%;
	z-index: 0;
	margin-bottom: 300px;
	overflow-x: auto;

	background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;

	-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3);
	   -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3);
            box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3);
}

footer {
	position: fixed;
	bottom: 0;
	z-index: -10;
	width: 100%;
	height: 300px;
	background: #555;
}

<div id="wrapper"></div>
	<footer></footer>

但是有两个问题:

1. 它在 chrome 中工作，但在 safari 中不工作
2. 如果向下滚动，背景图像不会移动；它不应该像现在这样修复。

Answer 1

您只需要使容器始终保持 100% 高度，并让页脚紧随其后。

此外，如果您希望背景图像在滚动时移动，则不需要修复 nackground

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow-x: auto;
  background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
  background-size: cover;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
  bottom: 0;
  z-index: -10;
  width: 100%;
  height: 300px;
  background: #555;
}

<div id="wrapper"></div>
<footer></footer>