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.
Related
The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
Good day! I have got a question about the Internet Explorer 9. Can anyone tell me if its document and browser mode (I mean rendering as Internet Explorer 8 and 7 when chosen) is appropriate to test HTML and CSS in different versions of the browser?
I used to use something like Multiple IE on my virtual Windows machine, but my colleague use the Internet Explorer 9 to test HTML and CSS "directly". So none of us has a sense of correctness of the chosen solution.
So, that's the question.
In my subjective experience, IE9's 8/7 "Browser Modes" have always been an accurate reflection of the actual browsers - at least for pure HTML/CSS.
However, there are subtle differences when it comes to JavaScript, see the "Differences between IE8 Compatibility View and IE7" section here:
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
I usually test with IE9's older "Browser Modes", but if I'm feeling paranoid or I want to be absolutely sure, I use my virtual machines.
IMHO the answer to your question is yes - go with the browser modes.
Here is a good article for you
http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Few differences that I have seen in IE9 Doc Mode vs real IE8 or IE7:
1) If a PNG image is given opacity (via Proprietary CSS filter), 'Real IE8/IE7' shows black linings.
2) JavaScript performance in 'Real IE8/IE7' is obviously not as fast as IE9.
3) Fonts also tend to have some display issue in various modes: http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/ and font smoothing is an issue in windows XP.
4) Embedded YouTube videos have z-index issues overlapping other elements (fixed by wmode).
5) Proprietary CSS filters work properly in 'Real IE8' but are not shown if applied to an HTML5 element in IE9 doc mode. (Faced this once)
Summary: If the site you are making is JavaScript intense or the client is very much concerned about users on IE7/8, have a check on Real IE 7/8 and get the issues ironed out.
I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.
My past attempts at writing userscripts ended working in Firefox, but not Opera, because of subtle differences between the two browsers. Is it possible to use of those libraries that abstract the differences away like jQuery inside userscripts to make them cross-browser compatible with little effort?
Yes, as the google search for greasemonkey jquery shows:
http://userscripts.org/topics/2324
http://joanpiedra.com/jquery/greasemonkey/
As the posts in the first link say, it means you add a relatively large jQuery cost to your userscript. It's not very hard to make the code work across Firefox and Opera -- you don't have to worry about IE :)