SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Now that's cool.
    No. It's not.

    That is a complete abuse of what the standards are for and is a big waste of time.

    ds, what you explained simply isn't true for me at all.
    I run a 2.26GHz computer with firefox by default, I use gradients, shadows, alpha transparency extensively - It doesn't skip a beat.

    It doesn't bother me if you choose not to use these tools.
    My reasons are clear, it saves a lot of time, allows for more flexibility, requires less images.

    I think you often solve problems that aren't really problems.

  2. #27
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    That is a complete abuse of what the standards are for and is a big waste of time.
    Ok, where do you get that from?!?

    Quote Originally Posted by markbrown4 View Post
    ds, what you explained simply isn't true for me at all.
    I run a 2.26GHz computer with firefox by default, I use gradients, shadows, alpha transparency extensively - It doesn't skip a beat.
    Try this page:
    http://www.cutcodedown.com/for_other.../template.html

    Do those hovers fire instantly like they do in Opera or Chrome, or do they have a second and a half delay? make the window wide enough to see the side gradient effects while short enough to scroll up and down -- is it jerky to the point of being unusable with starting to scroll having a two to four second delay? Because it sure as shine-ola does here and that's on a i7 870... Hell, just trying to resize the window has massive delays, lag, tearing and jerky unresponsive control.

    I'd suspect if you are using those effects without it 'skipping a beat' you're either not making pages big enough to need scrolling, not scrolling the page, or not using any dynamic interactions like hovers with them.

    Kind of like that cicada background crap that's useless in Opera or Safari with it flickering on and off during the redraw for scrolling... they're cute effects, but unusable on production pages.

    Which is where CSS3 gradients are at for me -- which is why occasionally I'll use them to make the layout, then slice them into images so they work everywhere and run without the rendering headaches on the production pages. It's just another tool in the toolbox.

    Though I'll admit I've never had anything but bad luck with firefox in terms of stability, usability, or speed... These days I lump it with IE on it's backwards half-assed behaviors and things never being fixed.

  3. #28
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ok, where do you get that from?!?
    It's an abuse of the standards to take a screenshot and *******ize what can be done in CSS with images..

    That's an interesting test case you have there, have you submitted it to them?

    I do see a small delay when you hover the images / spans but it's close to 200ms to be fair, but, it's still more noticeable than anything I've seen before.
    I don't do that type of thing on :hover

    The text-shadows seemed to cause more delay than anything - removing them fixes the scrolling for me.
    You were also using the fourth box-shadow value for 'spread' which I didn't know existed either - removing it fixed the delay on :hover
    0 0 8px 2px #0088FF

    You are right, that if that's the sort of effect you want to achieve the performance will be shabby.
    For me, that's not the type of effect I am after What you shouldn't do is use that extreme example as a reason never to use CSS3 text-shadow / gradients / box-shadows.

  4. #29
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I do see a small delay when you hover the images / spans but it's close to 200ms to be fair, but, it's still more noticeable than anything I've seen before.
    Here it's more than a second and a half, and removing the hover effects has ZERO impact on the painfully slow scrolling if you put gradient on anything taller than 32pixels.

    Out of curiosity, what's your video specs and OS? I'm actually trying to narrow down where it works and where it doesn't -- a simple body { background:linear-gradient blah, blah, blah makes pages painful to the point of not wanting to use them on ALL of my machines in FF, but I'm hearing from other people it isn't.... About the only difference I'm finding is that it's worse on linsux than it is in windblows, in OSuX you've got a good chance of crashing the browser, and for some reason SOME AMD/ATI video cards are immune to the problem. (pretty much anything labelled 6xxx HD)

    Quote Originally Posted by markbrown4 View Post
    The text-shadows seemed to cause more delay than anything - removing them fixes the scrolling for me.
    Odd, they're unrelated to the scrolling issues here which seem entirely tied to the box-shadows.... doesn't show the gradient problem though -- but again just set a linear-gradient on body and try scrolling it. It's renders the page useless. More of them you use, the worse it gets -- sucks so much cpu that just hitting 'page-down' on my media center nettop in FF ends up taking around 20 seconds to respond (with windows saying FF is "not responding" for the latter half of that time). Admittedly that's only a 1.6 Single core hyperthreaded Atom, but it's got ION so there's little excuse; especially when it's fine in Chrome and Opera. (Kind of like how VLC and Netfix can't play HD on it when Hulu and Media Player Classic handle it just fine)

    Quote Originally Posted by markbrown4 View Post
    You were also using the fourth box-shadow value for 'spread' which I didn't know existed either - removing it fixed the delay on :hover
    Which is funny since the fourth number is the solid color -- and one that any of the fancier effects (like the ones shown in some of the recent articles off site-points home page) rely upon. Solid color should be EASIER than blending, not harder.

    Quote Originally Posted by markbrown4 View Post
    What you shouldn't do is use that extreme example as a reason never to use CSS3 text-shadow / gradients / box-shadows.
    Sorry, if that's your idea of extreme....

    But seriously:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	Template Design CSS
    </title>
    
    <style type="text/css">
    body {
    	background:#000; /* Old browsers */
    	background:-moz-linear-gradient(top,#F00,#000);
    	background:-webkit-linear-gradient(top,#F00,#000);
    	background:-o-linear-gradient(top,#F00,#000);
    	background:-ms-linear-gradient(top,#F00,#000);
    	background:linear-gradient(top,#F00,#000);
    	filter:progid:DXImageTransform.Microsoft.gradient(
    		startColorstr='#FF0000',
    		endColorstr='#000000',
    		GradientType=1
    	);
    }
    </style>
    
    </head><body>
    
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    	<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
    
    </body></html>
    Are you able to scroll that up and down smoothly? Because I sure as shine-ola can't on any of my good machines... For some reason it runs great on my old P3 intel Express 2 dell laptop I keep in the garage; when my i7 desktop and T9400 laptop can't handle it in FF... while every other browser that supports it runs just fine.

    Still one ugly mess of code for background:#000 url(images/redToBlack.png); background-size:100% 100%; with that png being around 192 bytes... especially since unlike gradient, all modern browsers support it without those stupid malfing vendor prefixes. (even IE9) -- legacy browsers just let the gradient fade to the black... oh noes, not that

    Seriously:
    Code:
    background:#000 url(images/redToBlack.png);
    background-size:100% 100%;
    73 bytes code + 192 byte image.
    vs.

    Code:
    background:#800; /* Old browsers */
    background:-moz-linear-gradient(top,#F00,#000);
    background:-webkit-linear-gradient(top,#F00,#000);
    background:-o-linear-gradient(top,#F00,#000);
    background:-ms-linear-gradient(top,#F00,#000);
    background:linear-gradient(top,#F00,#000);
    filter:progid:DXImageTransform.Microsoft.gradient(
    	startColorstr='#FF0000',
    	endColorstr='#000000',
    	GradientType=1
    );
    402 bytes code....

    Splitting hairs really on choice/method... excepting that the image version doesn't drag geckotard browsers into the circles of hell on performance.

    I have yet to see a page that uses the dynamic gradients, shadows or other effects that aren't a buggy slow and annoying mess in FF unless you magically have that perfect combination of hardware it seems to want... said combination being from my experience brand spanky new ATI or decade out of date Intel...

  5. #30
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    That page ran fine for me (though I am on a bit of a beefy machine).

    Also, I think it's certain types of gradients. As you mentioned, it's usually larger gradients or dynamic events. Both of those are things I avoided on the site I mentioned earlier (which runs flawlessly on every FF browser we've tested, on a wide spectrum of machines). I don't think that's a reason to avoid ALL of them.

    That'd be like never using a loop in programming because if you have a loop of a billion entries it may slow down the machine. =p Just because you can't do anything doesn't mean you should cut it off completely.

    However, your CSS3/image cutting technique is interesting. I may use a variant of that (where I just deliver the images to browsers which can't handle the CSS3). I don't agree it's a violation of standards, though it's not a universal technique either. CSS3 is being created so we can have faster pages. The rendering may be slow now, but that's only because they haven't developed it well enough yet (hence why most of them are still browser prefixed).

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post

    Are you able to scroll that up and down smoothly?
    That's not too bad in my Firefox but by the end of the day it probably won't be so smooth as Firefox gets slower as the day wears on.

    However this page (that page is just for fun only and was an example for an old sitepoint competition so no comments please) is very jerky in Firefox when scrolled because of the diagonal gradients and the table rollovers are desperately slow compared to Chrome and even ie9. Granted the page is an extreme but we really should be able to use these things without having to worry that the browser will slow down.

  7. #32
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paul -- I'm hesitant to open that in FF here given what a disaster it is in Opera... which usually handles those types of things well... though I suspect it's opera's limited/early transition support causing the most problems here.

    Oh wow, there's a body background on it in FF... didn't include the -o version I guess.

    Great example of how bad things can get in FF when you actually start using the CSS3 properties.

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Paul -- I'm hesitant to open that in FF here given what a disaster it is in Opera... which usually handles those types of things well... though I suspect it's opera's limited/early transition support causing the most problems here.
    Yes Opera wasn't on the list for the demo so there was no catering for it. However I was a little disappointed that Opera still has the same bug since about opera 5 (or probably before) where it fails to redraw elements properly when they have been moved. It leaves the shadows and other artefacts behind which is a similar problem that plagued drop down menus for years (although I guess that was partly because at the time the specs said that browsers didn't have to redraw the screen if in the case of hover elements were moved).

    Great example of how bad things can get in FF when you actually start using the CSS3 properties.
    Yes, it shouldn't be that we have to worry about these things as well - but such is life .

  9. #34
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, side note on the 'extreme examples' bit -- I'd point out these are EXACTLY the types of things being advocated in recent articles here on Sitepoint... Konstantin has been posting some really good examples of using the various CSS3 effects -- for example:

    http://www.sitepoint.com/mastering-box-shadows/
    http://www.sitepoint.com/mastering-css3-text-shadows/

    All of which would have the problems in FF if used on an actual site -- especially the combined/layered effects...

  10. #35
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Out of curiosity, what's your video specs and OS?
    Macbook Pro, 2.26 GHz Intel Core 2 Duo, NVIDIA GeForce 9400M 256 MB

    Your example full page gradient works fine for me.

    Your examples are biased again, here's the comparison for me using those tools.
    Code:
    background:#000 url(images/redToBlack.png);
    background-size:100% 100%;
    + open up photoshop
    + generate & save image
    + extra request
    vs
    Code:
    @include linear-gradient(top,#F00,#000);
    Oh, side note on the 'extreme examples' bit -- I'd point out these are EXACTLY the types of things being advocated in recent articles here on Sitepoint... Konstantin has been posting some really good examples of using the various CSS3 effects -- for example:

    http://www.sitepoint.com/mastering-box-shadows/
    http://www.sitepoint.com/mastering-css3-text-shadows/
    No, they are not promoting adding multiple text-shadows and box-shadows to every element in the page. They are explaining how they work.
    Your bias is unbelievable.

    Admit defeat there's nothing wrong with these tools unless you use them for Really Goofy ****.

    Great example of how bad things can get in FF when you actually start using the CSS3 properties.
    When you start using them incorrectly, I agree with that.

    With Javascript you can make a real mess of the page too - there's no point throwing out the baby with the bathwater.

    Yes, it shouldn't be that we have to worry about these things as well - but such is life
    For what it's worth, I don't need to worry about this - the effects I use don't cause these problems.

  11. #36
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by samanime View Post
    However, your CSS3/image cutting technique is interesting. I may use a variant of that (where I just deliver the images to browsers which can't handle the CSS3). I don't agree it's a violation of standards, though it's not a universal technique either. CSS3 is being created so we can have faster pages. The rendering may be slow now, but that's only because they haven't developed it well enough yet (hence why most of them are still browser prefixed).
    It's akin to using tables for layout if you found out that tables rendered faster in the browser.
    We should use the tools designed for specific tasks. If any *reasonable* effect can be accomplished with CSS3 with little effort it's wrong to use an image for it.

  12. #37
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    However, some of the effects he's talking about aren't reasonable, and aren't reasonable in all browsers.

    For example, I usually use a stacked background technique so I can hit everything all the way back to IE7.

    Say I want a gradient. The stack looks something like this:
    Code:
    background: url(grad.png); /* backup */
    background: url(grad.svg?autogen); /* IE9 */
    background: -webkit-gradient(blah);
    background: -moz-gradient(blah);
    background: -o-gradient(blah);
    background: -ms-filter(blah);
    background: filter(blah);
    background: linear-gradient(blah);
    (Yes, I know that's not a perfect stack, bad syntax and there is a redundant image loaded for those that use the gradient... ignore that... it's a quick example =p).

    That stack let's me hit just about everything, and let's the browser use it's most appropriate.

    However, with really complex gradients (and you can get really complex), if it's slowing down the browser substantial, that isn't letting it work well, I could remove it and let it use the backup images.

    Also, you say reasonable... but what about the unreasonable (which is more what we're talking about). Even if it's a simple two color linear gradient, if it's lagging firefox to pieces, it's unreasonable in Firefox.

    We're not saying you should start replacing normal stuff with a graphic, but as a development technique it is very interesting, especially if you already have to generate a background image anyways.

    It's not an end-all, be-all solution, it's just another tool for your toolbox. I have a lot of those. Most I rarely use, but they're handy when you have that weird problem you need it for. =p

  13. #38
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Macbook Pro, 2.26 GHz Intel Core 2 Duo, NVIDIA GeForce 9400M 256 MB
    Your example full page gradient works fine for me.
    I'll add it to the list... Hmm. I'll dig out my Ge9500GT and see if it has the problem or not. DX11 level card specific perhaps?

    Quote Originally Posted by markbrown4 View Post
    Your examples are biased again, here's the comparison for me using those tools.
    vs
    Code:
    @include linear-gradient(top,#F00,#000);
    Plus the extra step of precompiling it with whatever tool you are using, and the massive bloated browser unique version that gets sent to EVERY firstload since you would STILL be sending the full non-shortcut version to users -- pretty much putting it on a even footing again. Don't try to catch me with card stacking friend; I don't fall for it.

    Quote Originally Posted by markbrown4 View Post
    No, they are not promoting adding multiple text-shadows and box-shadows to every element in the page. They are explaining how they work.
    Nor am I, NOR do I say that anyways -- but I should be able to apply them to one or two elements in the manner outlined on said pages without dragging a browser on a multi-ghz computer into the circles of hell. Simply doing the neon example (4.1) from that 'mastering text shadows' page thus:

    Code:
    text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color: magenta;
    On even just one element should not be enough to send JUST one browser off into la-la land; and currently it is. A simple gradient on one element is same; when I can do background-size and not have that problem.

    Quote Originally Posted by markbrown4 View Post
    Your bias is unbelievable.
    Pot, kettle. Your propensity for stuffing words in other peoples mouth is unbelievable... That or you're just failing to comprehend what I'm saying.

    Quote Originally Posted by markbrown4 View Post
    When you start using them incorrectly, I agree with that.
    You seem to think that using them properly -- aka "actually following the rules and specificaion for them then *SHOCK* declaring them on elements" is somehow "incorrect"... Seriously, whiskey tango foxtrot hotel india tango sierra...

    Quote Originally Posted by markbrown4 View Post
    For what it's worth, I don't need to worry about this - the effects I use don't cause these problems.
    For you on your hardware... I suspect your sample pool probably isn't large enough.

    Quote Originally Posted by markbrown4 View Post
    It's akin to using tables for layout if you found out that tables rendered faster in the browser.
    We should use the tools designed for specific tasks. If any *reasonable* effect can be accomplished with CSS3 with little effort it's wrong to use an image for it.
    There seems to be this tendency of late to think that the be-all end-all of CSS3 is to try and do everything without images; which is ALSO missing the point since all sorts of powerful new image effects that are quite often MUCH more useful are in there too... like background-size, border-image, etc. When CSS3 is NOT ready for prime-time, using a tried and true method that *SHOCK* works back over a decade or more of browsers that consumes little to no extra bandwidth and *OH NOES* one handshake... jumping the gun on technologies the bugs aren't worked out of yet is NOT exactly what I'd call a rational choice.

    Which is NOT to say I don't agree that for gradients, it would be really nice to stop using images leaving background-size for other things -- but it's just not there yet in terms of reliability or performance, especially with all the browser specific prefixed crap you end up having to send to the user.

    ... and while a precompiling tool like SASS with @include does simplify maintaining the code when it comes to all this stupid idiotic browser prefix crap (I'll give you that) you've just introduced as many extra steps for deployment as the twenty seconds it should take to make the image and you're still sending the full version with all the prefixes client-side - making it a wash.

    When the difference is splitting hairs on bandwidth and effort, and both approaches rely on CSS3 properties (background-size vs. linear-gradient), picking the one that doesn't have problems in any browsers seems the more logical choice. Anything else is just irrational "Wah, wah, is not".

  14. #39
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Plus the extra step of precompiling it .. Don't try to catch me with card stacking friend; I don't fall for it.
    Well, Compass actually watches for changes and compiles automatically. Ace in the hole.

    Come on, admit it, that is pretty hot

    My reasons for calling you on your biases are that you fail to acknowledge any of the benefits, while consistently claiming none of it is usable - you're wrong on both counts.
    You seem to think that using them properly ..
    I hold up your example and Salmon as incorrect uses of CSS3. At a glance both have crammed every box-shadow, text-shadow, border-radius, transition, transform and linear-gradient you could lay your hands on.
    I have very little understanding of how the browser processes these rules but I can appreciate that it would take a lot of processing power to achieve. You shouldn't expect you can throw anything at a browser and it can hold up.

    Coda:
    It's time for you to buy a mac.

    samanime, I agree with what you are saying.
    If you have performance issues you address them using any method that works.
    I haven't run into the bottlenecks because I don't use these browser crashing effects.

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    W
    I have very little understanding of how the browser processes these rules but I can appreciate that it would take a lot of processing power to achieve. You shouldn't expect you can throw anything at a browser and it can hold up.
    No, but you should expect reasonable requests to be handled efficiently.

    For example a simple border-radius on its own will slow down large applications that use many round corners. There's an interesting article here that confirms it.

    It's always been known that certain selectors are expensive in terms of speed (universal selector I'm looking at you) but in most normal applications they are largely irrelevant. However on complex pages you do need to be careful what you use and that will vary from browser to browser.

    There is no real answer and to be honest I think browsers should be able to handle most of what you throw at them without "us" having to have an in depth knowledge of how efficient each selector is and in which browser version it will slow down. Common sense should prevail but it is clear that some css3 properties do need to be optimised more efficiently by the UA.

  16. #41
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There is no real answer and to be honest I think browsers should be able to handle most of what you throw at them without "us" having to have an in depth knowledge of how efficient each selector is and in which browser version it will slow down. Common sense should prevail but it is clear that some css3 properties do need to be optimised more efficiently by the UA.
    Expecially when it's only one steaming pile of manure browser that has the problem... ESPECIALLY when that browser is NOT IE. Chrome doesn't have these issues, Safari doesn't, Opera doesn't.... Even IE9 and 10 Beta don't....

    I've started to think gecko needs to go the way of trident -- both engines are aging poorly, too heavily reliant upon code of their forebearers (for all the claims of a clean break, gecko based browsers are still Nyetscape 4's sweetly retarded cousin, just wearing the big-boy pants)... and it shows... PAINFULLY. See how the main renderer is such a black box in Gecko nobody can figure out how to simply make alignments on colgroups inherit... Time to throw it out and start over.

    Though I'll admit freely, I'm one of the few developers who has HATED Firefox in most every incarnation since it was introduced and hated mozilla suite before that for being a buggy unstable train wreck with the slowest RENDERER of any browser. Because of course, locking up and refusing to respond every 20 minutes like clockwork due to a broken caching model -- It's not a bug, it's a feature..

    That I can still make even the most recent version do just by trying to save images I've opened in multiple tabs.

    Quote Originally Posted by markbrown4 View Post
    I hold up your example and Salmon as incorrect uses of CSS3. At a glance both have crammed every box-shadow, text-shadow, border-radius, transition, transform and linear-gradient you could lay your hands on.
    Then what the {string of expletives omitted} are they giving us them for in the first place? Much less if using them ONCE is your idea of 'crammed'... Sure, some of the pages linked to are heavy in them:

    Some of the examples (like that full screen gradient) uses them only ONCE and still throws ricky fits on certain hardware combinations in ONE particular browser... and said pages "crammed" with them EXHIBIT NO SUCH PROBLEMS in browsers other than Firefox.

    Of course, if we said the problem was in IE, everyone's tune would change, right? Suddenly we'd have twenty different scripted shivs to workaround it?

    Off Topic:

    Oh yes, that crippled vendor lock in overpriced overvalued might as well be IKEA Apple nonsense is the answer... RIGHT. Christmas on a cracker what the blazes is in the kool-aid for those?

  17. #42
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No, but you should expect reasonable requests to be handled efficiently.
    I agree
    Quote Originally Posted by Paul O'B View Post
    For example a simple border-radius on its own will slow down large applications that use many round corners. There's an interesting article here that confirms it.
    That article that starts with this opening statement.
    The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. Iím not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experimental CSS features.
    --
    It's always been known that certain selectors are expensive in terms of speed (universal selector I'm looking at you) but in most normal applications they are largely irrelevant. However on complex pages you do need to be careful what you use and that will vary from browser to browser.

    There is no real answer and to be honest I think browsers should be able to handle most of what you throw at them without "us" having to have an in depth knowledge of how efficient each selector is and in which browser version it will slow down. Common sense should prevail but it is clear that some css3 properties do need to be optimised more efficiently by the UA.
    I agree with that, but I don't find the current breed of browsers struggling as much as ds is claiming with what I'm calling reasonable effects.

    ds, firefox just doesn't do that on my machine. It's my default browser and it handles these features quite well.

  18. #43
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I actually refuse to run FF for the very same reason. While I have little CSS issues on my rather beefy machine (3.06 Ghz i7, high end graphics card and 6GB/s hard drive, 6GB RAM). However, I have the saving-images-locks-the-browser issue without fail in the past several iterations, and it can even bring my system to it's knees. When I can play most modern games on max specs, but a browser can't handle ten tabs... somethings wrong...

    It should be almost impossible to have CSS slow a machine like mine down... period. FF does though. I tried several very complex examples and even on my work laptop (which is decent, but not as good), all of the other browsers could handle it just fine. FF barely moved.

    However, I don't think that dimishes CSS3's usefulness. At the same time, having image fall backs is also not a bad idea. =p

  19. #44
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I switched from FF to Chrome for this reason. I used to have a very slow netbook. Not a lot of processing power. Running FF alone would cripple my netbook. I like to have a lot of tabs up. Chrome allows for many tabs, and even can load a high performance game as well .

    Now that I have a faster computer, habit still has me use Chrome. FF is only good to me for firebug.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #45
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Even on my much faster computer, FF still crawls.

    I used to love and swear by FF, but now I refuse to have it open for more than a few minutes at a time because it bogs my whole machine down. I agree with DS that they just need to throw it away and start from scratch, or just go away. It's clearly become too antiquated.

  21. #46
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by markbrown
    That article that starts with this opening statement.
    Did you read PAST the opening statement? Here, I'll do it:
    In both Opera and WebKit, "border-radius" is among the most expensive CSS properties to affect rendering time. Even more than shadows and gradients. Note that it doesnít affect layout time ó as one would think ó but mainly repaint.
    Why Opera and Webkit? Because those were the two browsers that allowed him to do the kinds of tests he wanted to do. Meaning, other browsers could be worse, or fail harder on other things than border-radius. Would've loved to see what Firefox would have come up with.

    The CSS-heavy app page was merely the intro, where he described why he started looking further into CSS performance.

  22. #47
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Did you read PAST the opening statement? Here, I'll do it: ...
    The CSS-heavy app page was merely the intro, where he described why he started looking further into CSS performance.
    Yes, I read past it. And you're right Paul, there's some good information on topic in there.

    But, you think his example was light on CSS3?
    He's applying these styles to 400 elements on the page.
    rgba color
    rgba text-shadow
    rgba box shadow
    rgba box shadow 2
    border-radius
    linear gradient
    opacity
    I know not all effects are created equal but that's 2800 effects on top of regular layout, and it takes 177ms to draw everything. That's pretty much what I would expect.

    I also got different results visibly in Firefox, while his example was jumpy with scrolling - it was opacity that had the biggest impact on scrolling for me.

    It's clear that there's lots of factors and different browsers on different hardware will perform better at some things than others. Jason tested a game I made in lots of different browsers and gave some detailed feedback. It was using quite a lot of CSS3 and transitions as well as SVG & Canvas.
    The results were a mixed bag, some browsers performed well on different platforms & hardware. Some on lower specs outperformed the better hardware in some cases.

    It's good advice to test these thoroughly and be cautious - but it's not good advice to say it can't be used.
    I've found many uses of it time-saving for development, better output for clients and a better experience for users.

  23. #48
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    The results were a mixed bag, some browsers performed well on different platforms & hardware. Some on lower specs outperformed the better hardware in some cases.
    It was really cute how it locked up Firefox on two different platforms too. Oddly I think if you took that game you showed me mono-canvas and ditched the CSS3 altogether, it would be much more viable... and all your effects would actually work in IE... though admittedly that's a lot of work; you've got a lot less going on in that game in terms of screen updates and drawing than say, my stupid little canvas demo I linked you to. (which uses so many bezier curves it's a miracle I can get 15fps out of it full-screen in FF or 30fps in anything else).

    All of this stuff shows a lot of promise, but really needs to be dialed in more in terms of renderer speed. Canvas right now is 'ready to go' IMHO even in FF for simple vector/scaled games -- CSS3 effects are as you said a mixed bag, and IMHO should be used with a eyedropper. SHAME audio isn't anywhere NEAR ready for use though with it's half a second lag in just about everything, inability to loop without dropouts, and that you can't dynamically generate playback reliably or in all browsers.

    Also a shame javascript's timer maxes out around 33 ticks a second accuracy, limiting your frame rate options and ability to respond to changes.

    Quote Originally Posted by markbrown4 View Post
    I've found many uses of it time-saving for development, better output for clients and a better experience for users.
    Just be VERY careful on that last one -- this is the Internet, the only thing we know about who will come is we don't know who will come.

  24. #49
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    The other thing I found with that demo with all the buttons is that the number of elements on screen is important. Make the buttons bigger with a width / height and the performance increases.

    Thanks for the feedback Jason, I'll have a good play on different windows machines and see it how performs.

  25. #50
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by markbrown
    But, you think his example was light on CSS3?
    He's applying these styles to 400 elements on the page.
    Nobody thought the original page he started his article on was light on CSS3. But it would be a worthless test if you didn't take a page and test one thing at a time. A page with nothing but Opacity. A page with nothing but border-radius. A page with nothing but canvas junk. Applying 400 styles and saying "well this one bit of CSS was the heaviest" makes no sense to me, how could someone make a valid test from that??

    In the course of his testing he was also trying to improve the craptastic page he was asked to optimise as well, but I don't take that to mean his tests actually measuring performance were "light CSS3 pages with 400+ elements".

    I know someone who (unfortunately) believes his next project must have all this new stuff (also HTML5, localstorage and several other APIs). It seems the hype has convinced him that if he does not build by cramming as much crap into one page as possible, then his page won't be "future-proof" (or, he seems to have the idea that if he built more leanly and also with older technology, that within a year the page will "break" or quit working or something... not sure where he gets that from).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •