I have CSS3 animation on my site as an intro. On one computer (fast with a decent GPU) is smooth and what I am looking for. On another computer (much slower) it is very jerky and sometimes you miss the animation completely.
I have attempted to preload the entire page and then add classes that trigger the animation using JS to attempt to improved animation. It seemed to help some but did not solve the problem.
Is there a way to smooth out CSS3 animations to have consistency across computers of all types?
In lieu of posting all of the code here I created a fiddle.
The "smoothness" depends on the rendering capabilities of the browser which in turn depend on the client machine's capabilities. The best you can do is to make sure that your web pages do not have unreasonably heavy images, or hard to render fonts, etc. that takes more computation from the browser perspective.
Your fiddle works perfectly fine for me.
Related
So I made a site that heavily relies on CCS3 animations, I would never do this for a client as I know it is risky but as its just a personal project I don't mind.
The animations work fine on modern browsers using Windows 7 and they seem to work on XP when using Firefox, they don't work at all on IE but again it's a small personal project so I do not mind.
Now when using the site on the latest Chrome with XP the animations work but not correctly.
When you click the div, the div flips over displaying information, but on Chrome/XP it just flips the div but just shows the same div, just backwards instead of showing the other div behind it.
Also when using Chrome/XP it shows some of the images backwards when you load the site up, which I assume is the animations not displaying correctly.
You can see the site here: http://www.dansteeds.co.uk/awipmapv2/
Any help or information is greatly appreciated.
Chrome uses gpu hardware acceleration to render 3d css.
type the following url into your chrome browser http://chrome://gpu and check for 3D CSS: Hardware accelerated. If it isn't, it will instead use a kind of quasi-3d isometric projection.
I think the hardware acceleration might be disabled in your browser causing a bug in your animation.
:)
I just got into web development 2 months ago for a personal project. I am know facing an issue for which I would appreciate some advice of experienced people. In my project, I am using a lot css3 "effects": border-radius, box-shadows, gradients,etc. The thing is, I am now confronted to cross-browser issues. So my question is simple. Is it better to apply css hacks or use images (psd slicing)? Thank you in advance for your replies. Cheers. Marc.
I think you want to do a combination of both. PSD slicing will make it harder to update and maintain, whereas hacks don't usually get you what you want. Check out http://css3pie.com/ to see how you can incorporate most of the CSS3 techniques with IE. It's a great resource and I use it every day. It only works well for some items though, like drop shadow doesn't work well with PIE. For something like that you might do a background image of a drop shadow.
If you use some psd slicing make sure that the people that are visiting your website will not have any issues with slow loading. Truth be told, lots of people have a decent internet connection now so having a few more psd slicing will not be a problem.
Just make sure your images are well optimised for web and that should do the trick !
There are certainly items that you can use images for, but above all else, you are better off embracing the principals of progressive enhancement and making something that is compliant with current web standards. Older browsers are slowly going away, but web standards are not.
Ensure that all visitors to the site are able to access the most important parts of the site. Parts of the site may need to gracefully degrade and hide some features that are mainly aesthetic. You can then apply appropriate fixes for those areas that could either be CSS hacks or images (for example, drop shadows and gradients).
I want to have a vignetting effect on the background of a page I´m building. This is the page:
www.karolinadahl.se
I managed to get the effect I´m looking for in Firefox, and it seems to work ok. In Safari I get some kind of vignetting, though not quite what I´m looking for and the inset shadow slows the page down tremendously for some reason. Im using Safari 5.
I don't think it works in Explorer at all and I don't know about Chrome and Opera.
Is there a smarter way of achieving this effect on the background?
You're applying the effect correctly, however, these effects are
Not fully supported, which explains your problem with IE
Known to render differently from browser to browser
Still, time is on your side. Support will only improve. For a web-site still in development, I'd say stick with the CSS3 techniques rather than older, hackier solutions.
You could also try a gradient in the background. Might be more consistent.
I'm currently working on a site, and somewhere in my mass of stylesheets, something is killing performance in IE. Are there any good CSS profilers out there? I'd like a tool that can pinpoint rules that are killing performance.
Before you ask, I've disabled JavaScript, opacity, and box-shadow/text-shadow rules. The page is still jumpy. :/ If I disable all CSS, it runs great.
I need a tool that can profile the page and report where the CSS bottlenecks are.
So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that border-radius on an element that contains many children (e.g. a body level div) performs incredibly poorly on IE9.
I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css
From there, you can install a bookmarklet to easily run the test on any page.
The Page Speed plugin from Google has a section that analyses your CSS and tells you about inefficient selectors, perhaps start there?
hth
Note: I know its a Firefox plugin, but should help optimize a bit :)
Hmm, never heard of such a tool.
If you find none, things to look out for manually will include
Any filter statements (the classic alpha=opacity and others - IE has a number of very advanced graphical filters that are extremely expensive)
Huge elements (like thousands of pixels large)
Huge background images - maybe remove them all for a moment?
I would strongly suspect the first point - alpha transparencies can be a terrible rendering bottleneck, especially on older systems.
I also have performance problems on a web project I'm currently working on. It runs well in Firefox, Chrome, even IE8. In IE9 it bogs down.
After some detective work I discovered that eliminating all box-shadow CSS lines improved performance considerably. I had shadows from banners, tables, boxes and tabs, each with just a subtle amount of shadow and blur, but apparently enough for IE9 to get all moody.
The Chrome dev tools used to contain a CSS Selector Profiler for doing just this sort of thing. You can see screen shots of it in this blog post.
The Chrome team pulled the feature in Chrome 30 stating that:
CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline "Recalculate Style" event.
As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.
You could try to use an old version of Chrome to dig into the issue, but I'd recommend taking a look at the Timeline tab of the current version of Chrome dev tools with will show you how long Chrome has taken to calculate styles (where selector performance is affected), layout and paint the page.
Opera is experimenting with css profiling in its profiler.
It can be enabled following the steps on this page.
Then open the profiler, start profiling, and refresh the page you wish to analyze.
Stop profiling after rendering finishes, then the results will be shown.
I'm just wondering what is the least expensive way to use a lot of gradients in a site's design.
I feel certain that CSS will be less expensive for the browser than SVG, but I could not justify this without tests. I would suggest that you create your page with your many gradients in CSS and if (and only if) you find performance to be a problem should you try SVG or other technologies.
I would lean more towards CSS for this one. Seeing as it is CODE rather than an image.
Also, if you are leaning more towards using CSS, why not make it viewable and or workable in IE 8 and below, via CSS3pie? http://css3pie.com/
This is an interesting question. In my personal experience webkit has been faster with svg, but I could be wrong.
I created a test fiddle with css transitions and they look about the same, perhaps someone with more experience can extend the stress case:
http://jsfiddle.net/KLCEw/
Keep in mind that SVG gradients are best embedded through data-uri's so they don't create new requests to the server.