I'm having an issue where I have a CSS transition on my page (the header shrinks when you scroll down) and while the transition is occurring the background image of another element is flickering/shaking in webkit (Firefox is perfect). I've seen that people have had similar issues and I've tried the many different solutions offered out there such as adding:
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
But have had no luck.
You can see an example of it here: http://jsfiddle.net/ojdavey/9sesxy0y.
Any help would be much appreciated.
Related
I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.
http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.
Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:
-webkit-backface-visibility: hidden;
The solution for me was to apply the bellow css to the parent of all affected elements.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.
Update:
As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel
You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.
I was having the same issue in Chrome but not Firefox.
The temporary fix is to add a web-kit fix and remove the transition:
-webkit-transition: none;
On a website I'm working on I got images inside a container that need to zoom on hover. This works smooth BUT..
Whenever an image zooms in or out (when transition is kicking in) the image get's out of the container for the time of the duration.
I've adde overflow:hidden but it doesn't seem to work.
You can find the webpage in action over here: http://avdj.mtdev.be/drukwerk/
There is a known bug in Webkit-based browsers - see #62363.
add opacity: 0.99; to wpb_content_element to workaround this issue.
As far as I'm aware, as documented by Keith Clark's blog post on pure CSS parallax here, CSS parallax should work in all major browsers except IE, since Microsoft has not as of yet implemented support for transform-style:preserve-3d.
Yet, my own basic implementation of this effect, demonstrated here in this jsFiddle, works in Chrome 39, but does not Firefox 34. The latter does not seem to even be applying the
.back {
transform:translateZ(-2px);
}
style. What is the reason for this? Is there any fix? I've attempted to disable and enable various properties on each element to no success. Yet, I'm at a loss to explain how Keith Clark's implementation here works, yet mine does not.
there are a couple of problems in the HTML that are preventing Firefox from working. The first is that .container with overflow:hidden is a direct parent of your parallax items. Your body tag (which already has the specific parallax overflow settings overflow-x: hidden; overflow-y: auto;) needs to be the direct parent of your parallax-group.
Second, your non-parallax items (the lorem ipsum paragraphs) also need position: relative; and a z-index so you can control the layering. I tried it in FF on your JSFiddle page and it works. I was trying to solve the same problem myself because the non-direct wrapper causes different problems in Chrome.
I'm trying to create a parallax website. But then I have an issue with fixed positioning.
I have several sections , each with a background-attachment:fixed.
A position:fixed menu bar on the top with an hidden element in it on top of all sections.
A google map 100% with in one of the sections.
Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.
I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.
I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it )
Some pages suggested to use these two with the fixed elements :
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth.
If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.
Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D
I uploaded the page :
http://www.FarzanMohajerani.com/test/parallax
just click anywhere on the page to scroll.
I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle :
http://jsfiddle.net/Farzanmc/cRqxT/5/
It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong.
Thanks
This solved the issue for me:
-webkit-transform: translate3d(0,0,0);
Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.
I', having the same problem with Chrome at the moment and I narrowed down the cause to the following combination:
1) background: fixed;
2) transform: (any transform, even just putting scale(1), would instantly break it).
As long as an element that contains fixed background image doesn't have any "transform" on it, it works fine. But as soon as you even add "transform: scale(1);" which doesn't actually make any real transformation, it completely breaks the fixed background image. You can start scrolling, but it disappears. If it was outside of the screen, it will never appear at all, no matter how far you scroll.
So essentially, the problem is that Chrome at the moment can't handle fixed background images in transformed elements. No matter which level of descendent or ancestor we are talking about.
The thing is, this is pretty much an essential stuff that and I'm really hoping that it gets fixed as soon as possible, because it's extremely limiting. You can't disregard Chrome as if it's IE6.
And you can't apply "position: fixed;" on an "img" element, because it will be fixed to the first "transformed" ancestor, not to the real screen, since that's apparently how it's supposed to be treated, according to W3C. Although, some new value would be welcomed, some that can break all the way to the very window, and fixit to those coordinates.
I ran i to a same problem and fixed it this way:
I had to deal with fixed header on a website and anytime i would scroll with a mouse wheel the header would get choppy.... I had a display:none element in a header and as soon as i removed the element, header became fixed and steady, now it displays well no matter how fast i scroll.
Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.