Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Background-Image of 3d-translated div gets cut off under absolute menu bar

  • 3 trả lời
  • 2 gặp vấn đề này
  • 13 lượt xem
  • Trả lời mới nhất được viết bởi Ingo Steinke

more options

Summary: A website has a layered layout with a menu bar on top (positioned absolutely), and a stage below, which consists of two layers and uses a 3d-transform to achieve a "parallax scrolling" effect.

Sometimes, but not always, after the page has loaded, the background-image gets cut off under the menu bar which displays the underlying element's background colour instead. When moving the mouse, clicking anything, or activating firebug, there is a repaint after which the background image is displayed correctly.

When I remove the 3dtransform from the underlying div, the bug does not happen. In older firefox versions (below 45 or 46?) this did not happen.

The bug can be reproduced using this demo:

<html>
<head>

 <style type="text/css">
  body, html, div {
   border: 0;
   margin: 0;
   padding: 0;
  }

  .page-wrapper {
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-perspective: 1px;
   perspective: 1px;
  }
  #top_level_nav {
   z-index: 10001;
   position: absolute;
   width: 100%;
   border-bottom: 1px solid #fff;
   height: 5.5em;
   transition: border 0.5s;
   transform: translate3d(0,0,0);
  }
  .parallax {
      background: #000000;
   overflow: hidden;
   width: 100%;
   display: block;
   height: 100%;
   height: 100vh;
  }
  .hero-bg {
   background-image:url(background.jpg);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
/* remove this 3d translation to get rid of the bug: */
   transform: translateZ(-1px) scale(2);
   z-index:1;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
  }
 </style>

</head>
<body>
 <div class="page-wrapper">

  <div id="top_level_nav">
   MENU DUMMY
  </div>

  <div class="parallax">
   <div class="hero-fg"></div>
   <div class="hero-bg">
   </div>
  </div>

 </div>
</body>
</html>
Summary: A website has a layered layout with a menu bar on top (positioned absolutely), and a stage below, which consists of two layers and uses a 3d-transform to achieve a "parallax scrolling" effect. Sometimes, but not always, after the page has loaded, the background-image gets cut off under the menu bar which displays the underlying element's background colour instead. When moving the mouse, clicking anything, or activating firebug, there is a repaint after which the background image is displayed correctly. When I remove the 3dtransform from the underlying div, the bug does not happen. In older firefox versions (below 45 or 46?) this did not happen. The bug can be reproduced using this demo: <pre><nowiki><html> <head> <style type="text/css"> body, html, div { border: 0; margin: 0; padding: 0; } .page-wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 1px; perspective: 1px; } #top_level_nav { z-index: 10001; position: absolute; width: 100%; border-bottom: 1px solid #fff; height: 5.5em; transition: border 0.5s; transform: translate3d(0,0,0); } .parallax { background: #000000; overflow: hidden; width: 100%; display: block; height: 100%; height: 100vh; } .hero-bg { background-image:url(background.jpg); position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* remove this 3d translation to get rid of the bug: */ transform: translateZ(-1px) scale(2); z-index:1; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; } </style> </head> <body> <div class="page-wrapper"> <div id="top_level_nav"> MENU DUMMY </div> <div class="parallax"> <div class="hero-fg"></div> <div class="hero-bg"> </div> </div> </div> </body> </html></nowiki></pre>

Được chỉnh sửa bởi cor-el vào

Tất cả các câu trả lời (3)

more options

Reproduce the problem by visiting this demo with firefox 46: http://www.ingo-steinke.de/mozilla/

Here is the CSS and page structure:


STYLE
	
		body, html, div {
			border: 0;
			margin: 0;
			padding: 0;
		}

		.page-wrapper {
			height: 100vh;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-perspective: 1px;
			perspective: 1px;
		}
		#top_level_nav {
			z-index: 10001;
			position: absolute;
			width: 100%;
			border-bottom: 1px solid #fff;
			height: 5.5em;
			transition: border 0.5s;
			transform: translate3d(0,0,0);
		}
		.parallax {
		    background: #000000;
			overflow: hidden;
			width: 100%;
			display: block;
			height: 100%;
			height: 100vh;
		}
		.hero-bg {
			background-image:url(background.jpg);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
/* remove this 3d translation to get rid of the bug: */
			transform: translateZ(-1px) scale(2);
			z-index:1;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 100vh;
		}

BODY
DIV.page-wrapper
    DIV#top_level_nav
        MENU DUMMY
    DIV.parallax
        DIV.hero-fg
        DIV.hero-bg
more options
more options

OK, why bother, I'll just tell everyone to use chromium instead, fast and stable.