I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item disappeared while the transformation is being done, only on Google Chrome. Remedy?
This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).
To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.
If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to
make sure there are no manually set values to the 'position' property other than
'static'.
Just spent half an hour searching... Thought this could make it easier for you... regards. :)
Same problem here. I had a sticky header using position:fixed; that flickered in PC Chrome 34. I tried the solutions in this thread, position:static; in the parent broke other parts. But I know adding -webkit-transform: translate3d(0,0,0); basically makes Chrome turn that html into a layer so that it won't get repainted. That worked for me.
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
-webkit-transform: translate3d(0,0,0);
/* ...all other CSS... */
}
UPDATE
future-friendly answer is to use the will-change property to create a layer!
W3 specs
CanIUse
MDN definition
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
will-change:top;
/* ...all other CSS... */
}
And I'll be honest, this seems like a weird solution to fix the flicker, but in essence it makes the element a layer, same as translate3d().
Maybe a little late to answer, but it seems that the bug comes with the background-attachment: fixed property in chrome. I found a solution changin its value to "scroll". It will cause a jitterin effect on firefox but you can avoid it using a media-browser query in your CSS, something like this:
.yourstellarlayer{
background-attachment: fixed;
}
/*only for webkit browsers*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.yourstellarlayer{
background-attachment: scroll;
}
}
Hope it helps!
I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
This really bugged me and it almost ruined my night. My fix is to set
background-attachment: scroll;
It worked on my project.
Before this, I had it on fixed. Hope this helps.
For me the issue was the styles attach to the parent elements of the div who has the fixed background, I put -webkit-backface-visibility: inherit; to the two main parents of my fixed div.
in my case I was using foundation off-canvas so it goes like this
.off-canvas-wrap{
-webkit-backface-visibility:inherit;
}
.inner-wrap{
-webkit-backface-visibility:inherit;
}
We had a similar problem with a position: fixed; element. This element contained a relatively positioned container, containing an absolutely positioned image. On CSS transition the image disappeared, when the transition was done is re-appeared.
We tried solving the problem by setting the -webkit-backface-visibility to hidden on several elements, including the body element, but this did not help. With the help of this thread we used Chrome's web inspector to fiddle around with elments' position properties and luckily were able to solve the problem without having to alter the site that much. (all we had to do was change the position of the parent of the fixed element to static)
An update almost 5 years in the future... This still seems to be a problem with chrome. I've tried most of the solutions mentioned including adding:
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
and it is not fixing the stuttering issue. adding background-attachment: scroll takes away the parallax effect which is crucial to the UX of the site. The solution above that mentions adding a parent element is not changing anything for me. Any other ideas from people that have had this issue recently? I'm using Gatsby(React) on the front end.
Here is a solution that works (2014.7.11) at firefox 30.0, chrome 35.0, opera 22.0, ie 11.0:
STEP 1: add these lines at .htaccess:
# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>
detailed description of this problem and how to fix it:
https://code.google.com/p/chromium/issues/detail?id=102706
STEP 2: add images preloading, for example:
var pics = []; // CREATE PICS ARRAY
$(document).ready(function(){
...
preload(
'/public/images/stars.red.1.star.png',
'/public/images/stars.red.2.star.png',
'/public/images/stars.red.3.star.png',
'/public/images/stars.red.4.star.png',
'/public/images/stars.red.5.star.png',
'/public/images/stars.empty.png'
);
...
$('.rating').on('mousemove', function(event){
var x = event.pageX - this.offsetLeft;
var id = getIdByCoord(x); //
if ($(this).data('current-image') != id) {
$(this).css('background-image', 'url(' + pics[id].src + ')');
$(this).data('current-image', id);
}
})
...
})
...
// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
// alert("preload " + arguments[i]);
}
}
P.S. thanks Shawn Altman
My task was to create a page with a parallax effect.
After attempts to fix this by means of CSS I came up with the following solution.
JavaScript:
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{
var itemArr = $('.slider-title');
$(window).scroll(function()
{
var pos = $(window).scrollTop();
var wh = window.innerHeight;
$(itemArr).each(function(i, item){
var p = $(item).position();
var h = $(item).height();
if (p.top + h > pos && p.top < pos+wh)
{
// items ir redzams
var prc = (p.top - pos +h)/wh ;
//console.log(prc);
$(item).css({'background-position':'center '+prc+'%'});
}
});
});
}
CSS:
/*only for webkit browsers*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.slider-title{
background-size:auto;
background-position: center 0%;
}
}
.slider-title would be the item with background-attachment fixed.
So I am on Chrome version 40 and still seeing this issue. The workaround which is working for me at the moment is by creating a inner div setting position relative on that div and making it fit the height of its parent and setting the background on the parent div with a background attachment of fixed:
<section style="background-attachment: fixed;">
<div style="position: relative;">
// Code goes here including absolute posiioned elements
</div>
</section>
The problem seems to occur when you have a position relative and background attachment fixed on the same element in my case.
Hope this helps.
This one is late to party but an amazing discovery,
as I can see mostly css framework users, Bootstrap, Foundation (others) , have issues, and I am sure many of you also have scroll to top js functions that show scroll to top button as user starts scrolling down ,
if you have anything like this ( Bootstrap has it built in )
.fade {
opacity: 0;
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
}
.fade.in {
opacity: 1;
}
or you are showing some element via ,
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
or you are adding any kind of element or element class with transition , on scroll down, via js ( animation.css, waypoints.js, velocity.js )
remove transition/class if possible from that element or recheck when that element appears in order to fix the choppy Chrome issue.
Add the transform property to your element with fixed background image. You can have any set position.
#thediv {
width: 100%;
height: 600px;
position: relative;
display: block;
background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
border: 10px solid black;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
https://jsfiddle.net/rkwpxh0n/2/
I've had this problem on overlay div below popup window (randomly disappearing in opera 20) - both animated, and activated by script.
<div class="popupwrapper">
<div id="popupdownload" class="popup">
<h1>Test</h1>
</div>
<div class="popupoverlay"></div>
</div>
.popupwrapper {
display: none;
z-index: 9100;
}
.popupwrapper.active {
display: block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26,26,26,.9);
opacity: 0;
}
.popup {
position: fixed;
top: 30%;
left: 40%;
padding: 48px;
background: #e6e6e6;
z-index: 9101;
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
.popupoverlay.active {
opacity: 1;
}
.popup.active {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
Overlay was positioned absolutely (.popupoverlay), but in container which wasn't positioned in any way. I've copied overlay's absolute positioning to parent (.popup) and it works OK.
.popupwrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9100;
}
I think problem appears only when positioning of parent elements isn't obvious.
Glad if helped anyone. Regards
Seems to bug in Chrome the moment you add any markup on the element. Try removing the background from such element and give it a position:relative. Inside the element add a new div with the dimensions you need and add the background, just don't add any markup inside of it.
Example:
Current:
<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
Corrected:
<div class="container" style="position:relative;">
<div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
Hope it helps!
Another workaround if you must have position: fixed/relative/absolute maybe because you have an absolutely positioned element inside (as was my case) is to create a wrapper div inside of the flickering div and move the position and background property to that.
e.g.
you had -
<div class="background-flickers' style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
Possible workaround
<div class="no-more-flicker!">
<div class="wrapper" style="style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
</div>
I don't have the flicker anymore, apparently the flicker bug does not descend to child containers.
i also had same issues in chrome
it's very simple no need to add any webkit & media tag just follow below steps
1.instead of background:url('path-to-image') set the image like below and set the position as fixed
2.
it will work in chrome as well as IE browser
The issue still persist.
its happening to me on google chrome when i have { background-attachment: fixed; transform: scale(1); transition: transform }
I need background-attachment fixed for parallax effect.
I am scaling my container on scroll.
when tranition and transformed is removed parallax works. Having said that, i can have either one scale effect or parallax effect and not both working on chrome.
Safari doesn't complain and works both like a charm
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Add webm and ogg sources to support more browsers)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.
I might be a bit late to answer this but this will be useful for new people looking for this answer.
The answers above are good, but to have a perfect video background you have to check at the aspect ratio as the video might cut or the canvas around get deformed when resizing the screen or using it on different screen sizes.
I got into this issue not long ago and I found the solution using media queries.
Here is a tutorial that I wrote on how to create a Fullscreen Video Background with only CSS
I will add the code here as well:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
I hope you find it useful.
Just a comment on this - I've used HTML5 video for a full-screen background and it works a treat - but make sure to use either Height:100% and width:auto or the other way around - to ensure you keep aspect ratio.
As for Ipads -you can (apparently) do this, by having a hidden and then forcing the click event to fire, and having the function of the click event kick off the Load/Play().
P.s - this shouldn't require any plugins and can be done with minimal JS - If you're targeting any mobile device (I would assume you might be..) staying away from any such framework is the way forward.