I'm trying to dive deep into browser rendering and came up with this little demo in preparation for a talk.
I put together a animation demo where you can easily switch scheduling from requestAnimationFrame to setInterval and also positioning from top/left-based to top/left-based in combination with translate3d(0,0,0) or even entirely translate3d(x,y,z)-based.
Now I know that stranslate3d isn't a silver bullet and especially that it can become costly if applied to too many elements. However, there is one particular thing that caught my attention. If I switch the positioner from DefaultPositioner to Translate3dPositioner it seems that I get much longer Recalculate Style phases than before. I couldn't find any information about that so I'm wondering if anyone can share more info about what's going on here?
Here is the link to the demo: http://plnkr.co/edit/TKwKBk?p=preview
Just switch implementations inside the app.js file.
One more thing: When you click on resume to kick off the demo, you should wait a little bit until all boxes moved a bit apart. I know it's a poor demo ;-)
Related
I've read somewhere, (unfortunately I can't find my source again) that if a user has loaded an HTML page with a running CSS3 animation (infinite parameter) and he decides to leave it, the browser (computer) still needlessly plays the animation and so, CPU (or Acceleration hardware?) is still working for the animation although the user left the page.
So if someone could answer me, I will be pleased.
Is this fact true?
And if it's true:
Are the transitions also concerned with this issue ?
Is pausing animation (and transition if concerned) enough to avoid this problem? (I was thinking to force the pausing with an onbeforeunload event) Or should I have to do another thing ? Notice that I don't want to use "hover" to start the animations/transitions.
PS: I'm still new in CSS, javascript and know no other language. And sorry but my knowledge of English language is far from top...
If the user leaves the page completely (e.g. navigates to a whole new page or closes that tab) then the animations shouldn't keep running. If they somehow do keep being updated, it's because of a browser bug and you shouldn't worry about it anyway.
However, CSS3 animations for hidden elements (display: none;, for instance) still get evaluated, since they are keyframe-based, and there might be a keyframe sometime in the future that would cause the element to become visible again.
Imagine wanting to animate a box by first hiding it, then showing it again and making it flash. If CSS transitions would suddenly become disabled when the box is hidden, the animation would stop and the box would never appear again. And that's not what you want.
Note: profiling your web page can be done e.g. in Chrome using the Developer Tools (F12 -> Profiles). I haven't used it to profile CSS3 animations though, so I'm not sure if it can be done. You can however just take a look at Chrome's very own task manager (Shift-ESC) and see whether your website is using up a considerable amount of CPU. If that's true, then it's a sign that there might be too many animations on that page.
How can I position an element--such as a complex cursor unsuitable for the cursor property--relative to the mouse position using CSS 3?
I know how to do this with JavaScript, but it appears too choppy; I'd rather use CSS and fall back to jQuery when support is lacking. (Event when I work with elements directly and bypass jQuery, it's too slow.)
JavaScript can be used to make preparations and such, if necessary. While not preferable on principal, JavaScript is acceptable as long as it isn't in charge of updating the element every time the mouse moves.
I kindly request that answers not be used to reason why this cannot be achieved, as CSS is rapidly evolving, and the future potential of solving this problem may change. Feel free to speculate all you want in comments.
I am using Sass (SCSS) with Compass and jQuery, along with my own JavaScript framework.
As of today, CSS does not support positioning elements relative to mouse pointer.
So if you're not satisfied with cursor: url('pointer.cur') (thanks #ilya-streltsyn), then JavaScript is the only solution for you.
Or maybe you shouldn't do that in the first place. When an SWF uses a custom cursor, this freaks me out a lot.
I've noticed whilst optimising animations for use on iPad using hardware acceleration, I seem to be coming across an issue that I haven't fully been able to resolve. If you are applying webkit transforms such as translate, although the animation runs great, if in the middle of an animation occuring the user scrolls the page, when they release it causes the animation to stutter whereby it reverts to its original position and attempts to continue its animation to it's end point.
I've been looking everywhere for resolve on this issue, having seen it occur on the iPad store as well! If you have an iPad at hand and you navigate to, for example: http://webkit.org/demos/transitions-and-transforms/ , if you select an item then before the button animation has completed drag the page(scroll) then release it, you will see the animation flicker back to its original position and then repeat until its complete.
The only way I've been able to work around this is when a touchmove event occurs, I tell the animation to just stay where at its original location, which stops it from trying to repeat the transition on release, as even attempts to just tell it where to go again cause it to revert regardless (seeing as how css transitions seem not technically able to be stopped).
Has anyone found any workarounds to this issue, I'm pretty sure this is a bug on iPad as opposed to a problem with the animation (this does not involve issues regarding preserve-3d and what have you), or if I should be reporting this as an issue.
Thanks!
Not sure if I'm reading between the lines, but I suspect you might see better results if you use touchend versus touchmove or touchstart.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
I have been experimenting with the Majestic template at freecsstemplates.org. So far so good; I really like the look (or to be more specific, my boss really likes the look).
However, I am noticing that the CSS that drives this template seems very brittle; small changes can cause really radical breakage. In particular, if I reduce the size of the header in the CSS (to eliminate some of the empty space at the top of the page), both of the outside columns suddenly disappear.
With small websites, sometimes I cry uncle and just use tables for layout. I realize this is heretical; should I be leaving the design to the professional designers? Or maybe I'm going about this the wrong way, and someone can set me straight.
I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.
For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.
However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.
I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.
CSS is delicate, but still easier to deal with than a site full of table layouts. I found Dave Shea's book CSS ZenGarden to be a great help in learning CSS from a designers perspective.
Often in layered templates there are a few places where changes to CSS can be made, and it can be really confusing to follow which selectors are controlling the element you wish to manage. There are many tools out there that can help, but some that have been useful to me are:
Google Chrome and its Inspect Element option
Selector Gadget - a bookmarklet that will help you visually determine the selectors that affect an element
Firefox's Web Developer plug in
One other tip is to learn about the !important modifier - it can come in handy to force a particular property setting when there are multiple CSS selectors affecting the same element.
CSS in my experience is easy to understand in concept, but takes a long time to master.
Brittle CSS can be very brittle, but good CSS can be wonderfully flexible.
As it stands CSS can either make layouts wonderfully simple and flexible or it can make the simplest of tasks an absolute nightmare.
Purists will tell you to use CSS no matter what, a pragmatist will tell you to use what works. If using a table or non-CSS solution makes something infinitely easier to do, then use it!
Personally I try to use pure CSS as much as possible, but there have been times when I want to do nothing but swear when something glorious in FireFox looks awful in IE. This is where the hacks come in. It is these hacks and work arounds that tend to make CSS brittle in the first place.
Half the problems with CSS would go away if all the browsers did precisely what the CSS spec says they should do. Alas, this is yet to happen so we have to live with either using tables, or on occassion, brittle CSS.
The best solution is to make the design as simple as possible. If you find you have a hundred divs and lots of CSS trickery to do something straight-forward, stop. Re-think how you are approaching it and try again.
At the end of the day your website users don't really give a monkeys what your website looks like as long as they can get at the information they want with minimum effort. Successfully manage that and they will not care how photorealistic that shiny nav bar is, or how well the borders line up etc.
That's my 18pence at any rate :)
I agree most css template is hard to read, and different people may have a very different approach to the same layout strategy. Since there are too many hacks/tricks/techniques in css it is really fragile when you try to modify those existing one since almost all cases, the styles are very dependent to each other.
Css doesn't break as long as you don't break it ;) It's a language. Just like a regular one, if you don't use proper grammar people won't understand what your saying.
If a layout doesn't work or suddenly your page looks rubbish, I'll guarantee you it's your fault. Css isn't brittle, the code you wrote with it might be.
So start by learning the basics and don't just dive into some file you found online which might (in your case, does) contain very bad code.
If you end up wanting to use tables for everything may I suggest you start looking at some grid systems like http://960.gs/ and ease your pain.
Gideon