We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Fungovanie tejto stránky je z dôvodu údržby dočasne obmedzené. Ak článok nevyrieši váš problém a chcete položiť otázku, napíšte našej komunite podpory na Twitter @FirefoxSupport alebo Reddit /r/firefox.

Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Ďalšie informácie

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

  • 3 odpovede
  • 2 majú tento problém
  • 13 zobrazení
  • Posledná odpoveď od 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>

Upravil(a) cor-el dňa

Všetky odpovede (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.