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.
Related
The Goal: to create a fixed background position in a transformed element that works in Firefox.
I have tried all solutions on this page (and a handful of others), but none have worked:
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
Things I have tried using are static positions, backface visibility setting, z-index setting, other background-attachment stuff.
Demo:
https://jsfiddle.net/96u9xqbn/6/
.fixed1 {
transform: translateZ(0);
}
If you remove the transform above, it works. But, If you're using something like Skrollr, or have another need for the transform, then the background is not properly fixed in firefox.
Unfortunately this is not bug, but a change of scope.
There was a problem where browsers were inconsistent in their behaviour with background-attachment:fixed; inside transformed elements, which was causing additional inconsistencies with 3D transforms.
The spec for background-attachment was adjusted to include a rule that elements within transformed elements would have their background-attachment rules set to scroll.
Firefox and Edge have both conformed to the new spec, Chrome has so far not deployed the change on their side (at the time of posting this, their bugtracker shows 30 Nov as their end date)
Workaround:
The quickest and easiest way to work around this change of spec would be to use a parallax library to hit this for you. A fairly popular one is called Skrollr, and I've adjusted your fiddle to include it.
Essentially you can just add data-0 and data-10000 attributes to your element, and then initialise the library using skrollr.init();
This has the drawback of using a library for something that was previously achievable in clean CSS, but it does also carry positive weight in that a parallax background is much easier on the eyes than a fixed background.
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.
I am a mostly skilled server-end developer, and am creating an ambitious website project - all by myself. I know c#, MVC, T-SQL, LINQ, and ASP.NET pretty well. Obviously, since I'm working by myself, I have knowledge in design too. I'm obviously good with html (who isn't?). And I absolutely love jQuery! The thing is, I'm decent in my understanding of css, but css is my least knowledgeable trait. I understand programming, I also am good in design, not just because I have a decent level of knowledge in css (and jQuery) - but also because I just know what looks good (I can draw and paint on real paper too).
The thing is, I know I can probably do this with jQuery code, but I was wondering if this could also be done with css alone. On my main design (Views/Shared/_Layout.cshtml) - I made the body to have a "min-width: (my value);" attribute, which, obviously isn't supported with older browsers, so I also included a transparent image of a default width of 1px that I set to stretch to my desired width also - it works in controlling the width of the page (to the minimum I desired). But - I have a site header div which resides at the top of the page. I have a part of that header div with elements positioned on the far right - which is nice when the browser is on a device that is large enough and the browser is in decent size, but once the browser is set to a size less than my desired minimum width, then the scroll bar shows up, and I can move it around as expected. But, the elements in that header div do not stay to the far right in conjunction with my minimum width - but stay on the right of the current window size instead. I have the main div holding the elements itself set to be in fixed position, I tried making those elements relative with no success. I tried a few ideas, the problem still persists.
So, as I said, I am well aware of concepts using jQuery that can do what I have previously described I desire in these regards, but, as I also said, I know a decent amount of css, but am the least close to an "expert" in css than anything else I know. I just have a strong suspicion what I desire here can be done with css and css alone (also, it would be nice to have it compatible with most browsers, or at the least most browsers made after the year 2008).
Can someone please give me some good information in these regards?
I just remembered asking this question.
I actually found a way to go about doing what I wrote I desired here through some experimentation that eventually got me to where I needed to be. What I did was instead of using relative positioning - which I thought was the proper way of doing this, I used absolute positioning inside the absolute positioned top header div. I didn't think this would be the solution at the time of asking the question, I assumed setting something as absolute positon - even inside something that is already absolute positioned - would put it in a new context of absolute positioning like any absolute positioned element inside the body tag. What I discovered was if I put an absolute positioned element inside another absolute positioned element - the context of the absolute positioning was based on the original absolute positioned element - so top (or left for that matter) 0px wasn't 0px from the context of the body (the very top of the page) - but - 0px from the element that the element is inside of. I think that's a pretty explanation of it, so I'll end explaining it here.
I'm sure there's plenty of people that know css much more than I do, and think this issue I had here is so basic, but, I did ask the question, and I might as well answer it based upon the solution I used. I could've posted an example on jsfiddle like asked for in a comment, but I thought my explanation was good enough, and since no one offered an answer based on my question alone, I decided to try to address the issue with experimentation, which I had success with.
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.
I have the following code:
http://jsfiddle.net/RFMxG/1/
When the transition runs, you can see a padding of about 20-30 pixels on the left hand side. Despite the fact I have set the transform-origin to be 0,0,0, it is still not correctly rotating about the y-axis. The left edge of the blue box should be flush against the left hand edge at all times during the animation.
Can anyone tell me what I've done incorrectly?
Okay, there are whole bunch of issues here:
1) CSS transforms aren't animatable using transitions. If you look at the W3C list of transitionable properties, you'll notice that transform isn't there.
2) -webkit-perspective only affects the children of the element it is applied to, not the element itself. Read the Safari blog on this:
The interesting thing about -webkit-perspective is that it does not
affect the element directly. Instead, it affects the appearance of the
3D transforms on the transformed descendants of that element; you can
think of it as adding a transform that gets multiplied into the
descendant transforms. This allows those descendants to all share the
same perspective as they move around.
3) It's awesome that you posted a fiddle, but since this is a CSS problem, for future reference it would have been a lot easier if you cleaned out all the javascript, and used one set of browser prefixes only. Help us help you!
4) What you probably want to use is an animation. Here's a highly modified version of your fiddle that works on hover:
http://jsfiddle.net/RFMxG/4/
5) If javascript is your skill set, and you're at all concerned about browser compatibility (which of course you are!), I highly recommend doing these kinds of animations with jstween.
Right, so the solution was actually due to the fact the transform origin needs to be set prior to the animation starting (it cannot be set at the same time the -webkit-transform property is set).
I've updated the fiddle to demonstrate this now works correctly.
http://jsfiddle.net/RFMxG/5/