An application running on our company intranet used to use a jquery opacity animation to show a bunch of blinking indicators. As many of our systems are old and slow I updated this with an animated gif which drastically improved the responsiveness and page scrolling of the browser.
I then discovered that the majority of our users, who access the site through a terminal server, have internet explorer animations disabled through a group policy. Therefore they can't see the animating gif. It's hopeless asking the admins to enable this, they just cite performance issues etc. Is there any html code I can use to trick IE into allowing this image to animate? If not, what is the best (least processor / memory intensive) way of displaying an animation if I can't use a gif?
Going on the fact "blinking indicators" sounds like quite minimal animation, have you looked into css3 animations? Needs IE10+, though.
Also: JQuery is a big library for just an animation. Raw javascript may keep things smaller.
Related
I have created this personal website: www.lonewulf.eu, but I am getting poor performance in the following browsers:
Performance:
Chrome - Good(as it should)
Firefox - Good(a bit slower than Chrome)
IE 9 - Medium/Slow
Opera - Extra slow/laggy
Now, I do have a lot of flash overlays(3 flash files) and a portfolio showcase on the same page which doesn't help but even if I remove those it still lags. It seems to be a css issue, any suggestions on this?
CSS: http://www.lonewulf.eu/css/main.css
Taking some stabs in the dark (no IE here atm), I see a few potential issues:
You're using web fonts extensively; for older browsers, this can have a sizeable performance impact;
You seem to set up a bunch of incomplete css transitions; you define how long the transition is, and what the transition function is, but you never specify which property you want to transition.
You appear to be loading jQuery twice.
I'm a little confused by this one. A similar question was posted here:
How to deal with poor HTML5 video performance in Chrome?
but no satisfactory resolution seems to have come of it.
The long and short of it is that the HTML5 video element has a very poor performance in Chrome. Every other browser I've tried (IE9/10, Opera, Firefox, Safari, Safari iOS) runs absolutely fine but Chrome (for Windows) buffers very slowly and occasionally stops buffering altogether. It seems to ignore the preload attribute, although according to this article:
http://oddlystudios.com/blog/html5-video-problems-in-chrome/
it DOES preload, just limits itself at a couple of MB. This is definitely a recent thing, probably only affecting recent versions (I'm on 26.0.1410.64 m) and it's not only affecting my projects but also other sites including YouTube. It seems to be irrespective of file format, and only seems to affect longer videos (those of 5 minutes and above).
I guess my question is, has anybody else come across this phenomenon? If so, how do you combat it? In the other thread disabling the hardware acceleration for H.264 was suggested, but not only does this not work for me, but it's impractical from a development standpoint.
Yes Chrome itself preload just few of MB's among its entire video. The only approach taken by me was, to show loading progress bar while we load the entire video at background. once fully loaded the video, remove the loading layer and show the video to play ahead.
I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.
Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):
Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).
There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.
In order to take advantage of the GPU you have to use translate3d(x,y,z) instead of translate(x,y) in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.
Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.
Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.
I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.
Animating box-shadows and -webkit-gradients is very expensive, try removing them temporarily to see if it improves performance. If it does, see what you can do to replace them with images.
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.
I am writing a complex tab based web application where each tab is unrelated to each other in the sense that there is no interaction. So for ease of development i want I want each tab to be a separate html page viewable on its own and at later stage I can assemble them via tabs or may be menus or trees
so question or questions are:
I am planning to use iframes, does all major browser support them?
Are iframes going to be deprecated, so what are alternatives e.g. is object tag supported by all major browsers?
May be i can use some better strategy instead of iframe/object?
But what I love about iframes is that it can be totally modular, so each page doesn't know about other.
Note: i selected the answer which explain well but still i am not sure why not iframes
question iframes vs ajax may answer that.
Yes, all major desktop browsers support iframes. So do many mobile browsers, including IEMobile, Opera Mobile, and Safari on the iPhone. The only major browser I know of that doesn't support iframes is the BlackBerry Browser.
The object tag is supported by most browsers, but the implementation is extremely inconsistent across the various browsers.
What's wrong with just having a flat page with an ordinary navigation menu? If you are only displaying one page at a time, and the only interface element being placed outside of the iframe is a tab menu, then why not just integrate the tabs into the page layout and do away with the frames?
Frames of any sort tend to break the familiar browser behaviors that people are used--like the forward and back navigation buttons. And they completely disable the use of bookmarks. When building a website, you should try not to restrict or dictate to visitors how they're allowed to browse your site. If the user wants to open a link a new tab, they should not be left without a navigation menu. If they make their browser window a particular size, the page content should fill that area, not a predetermined area specified by the dimensions of the iframe.
Frames are inherently user-unfriendly, which, unsurprisingly, makes them search-engine-unfriendly; which is why so few professional websites use frames/iframes. Cheap broadband is widespread enough these days that reloading a few extra kilobytes of navigational data makes no difference to the overall user experience.
If I were you, I would use jQuery UI Tabs instead of my own solution.
it looks like your website is not static, so i don't see why you're doing it with bare HTML.
I'd use ASP.NET and CustomUserControl as each of your tabs, that they all the tab would be truly independent and you can reuse them anywhere in your application
For the separate pages in each tab, you can as well use server includes.
To answer your first 2 questions:
iframe is supported across all the latest web browsers however i am not sure about mobile browsers. Opera mobile yes, dont now about iPhone.
the next major iteration of html is being led by WHATWG and the iFrame will be supported. It is also supported in xhtml
As far as different approaches, that very much depends on what you are going to be doing with the tabs. if each tab is going to have a lot of information on it or take a while to load then separate iFrames is probably best. Also, if you are going to reuse the code as independent pages else where then iFrames are also a good option.