Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

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

  • 3 amsoshi
  • 2 sa na da wannan matsala
  • 13 views
  • Amsa ta ƙarshe daga 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>

An gyara daga cor-el

All Replies (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.