在Chrome 77上高度似乎不能正常工作

Question

我有一个页面，可以很好地使用Firefox，但不能使用Chrome77。

​

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 100px;
  display: block;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

#main-section {
  flex-grow: 1;
  background: url("https://picsum.photos/id/15/1000/1000");/* any image you want */
  background-repeat: no-repeat;
  background-size: cover;
}

#main-section-background {
  min-height: 100%;
  height: auto !important;
  background-color: #ffffff;
  opacity: 0.9;
}

.main-content {
  min-height: 100%;
  height: auto !important;
  display: flex;
  justify-content: space-evenly;
}

footer {
  height: 100px;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

<div id="container">
  <header>
  </header>

  <section id="main-section">
    <div id="main-section-background">
      <div class="main-content">
      </div>
    </div>
  </section>

  <footer>
  </footer>
</div>

​

背景图像不透明在Firefox中工作得很好。使用chrome时，height和min-height属性没有任何影响，并且不透明度不可见。我尝试了几种方法来强制内容的高度，但看起来Chrome只在实际的HTML内容上应用了不透明度(为了清楚起见，这里没有提到)。

Answer 1

您可以优化代码，只保留应用了多个背景的main-section：

​

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  height: 100px;
  display: block;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

#main-section {
  flex-grow: 1;
  background: 
    linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),
    url("https://picsum.photos/id/15/1000/1000");/* any image you want */
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
}

footer {
  height: 100px;
  background-image: linear-gradient(lightblue, rgb(61, 133, 214));
}

body {
 margin:0;
}

<div id="container">
  <header>
  </header>

  <section id="main-section">
    
  </section>

  <footer>
  </footer>
</div>

​