We all know that background-attachment: fixed makes the background fixed and creates a parallax effect. However, this is extremely expensive, since the DOM has to repaint every time you scroll on the page. This makes your site feel a bit choppy, especially if you have several fixed backgrounds on your page. Does anyone know a better way to do this?
This pure CSS example uses absolute positioning, transform, and perspective to render the parallax effect. For some browsers, scroll-behavior: smooth may also minimize some of the visible choppiness.
There are more efficient ways to render a parallax effect by using JavaScript by animating only the visible elements and using intervals to update element positions. This article explains some of those techniques in greater detail. The requestAnimationFrame function in particular allows the browser to execute the scroll animation on the next available repaint.
Related
I have recently been animating a fixed position element using CSS by changing the left/right propertied of the element.
This works fine but causes some 'janky' animation when it comes to Firefox/Safari. I had a look at optimisations and the general thought it to use transforms as it performs much better and you can use the GPU of your computer which means the animation runs much smoother.
The problem I have now ran into is after reading this qusetion/answer it looks like you can't run transforms on fixed position elements.
Has anyone got any ideas on where best to go with this?
Happy to setup a codepen if it helps people.
Edit: As Cbroe pointed out, it's only on fixed position children of parent elements you're applying the transforms too.
I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
Background:
I am trying to transition smoothly between various presentations of my website using media-queries and CSS3 transitions. So far everything appears to be hunky dory, however, I've hit a snag while transitioning between a presentation that contains a vertical scroll-bar and one that doesn't. I think it's pretty common to change website widths with media-queries, so I was surprised when nothing came up on Stack about this.
The problem
Webkit browsers appear to enter an infinite loop / flicker when the transition results in a change to the presence or absence of the vertical scroll-bar. Here is a demo of the behavior.. to trigger it, just re-size the window slowly around the 700px wide mark in Chrome or Safari PC.
Question / what I've tried
I'm wondering what the workaround here is for Webkit? Firefox has no problem with it. I've tried removing the easing and transitioning faster (not preferred). I realize that I can simply remove the vertical transitions and simply transition the width, however, it is important to my design to transition both height and width.
I think the easiest solution would be to force the scroll bar to always be present. The simplest way to do that is by using this little snippet:
html {
overflow-y: scroll;
}
Here is your example with the above snippet added: http://jsfiddle.net/joshnh/8XW4v/show
I'm not sure if it is a webkit bug, because if you think about it, it is expected behaviour (it's just weird, and Firefox have done a smart thing in making sure it doesn't happen). Basically, when the media query kicks in, the element shrinks, and the parent no longer needs a scroll bar. The problem with this is as soon as the scroll bar disappears, the media query is no longer relevant due to the extra few pixels that are now available. So the object grows again, the parent brings back the scroll bar, kicking in the media query again, and so on...
So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).