This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

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

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>

Modified by 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.