Background-Image of 3d-translated div gets cut off under absolute menu bar
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>Modified by cor-el
All Replies (3)
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
Please see this support article: https://support.mozilla.org/en-US/kb/where-go-developer-support
OK, why bother, I'll just tell everyone to use chromium instead, fast and stable.