Here's my website, I used a template for it
http://www.hdilapp.com
I tried it with 4 browsers:
Safari
Google Chrome
Firefox
Internet Explorer
Out of the 4, Safari performs the best. By "best", I mean the scrolling process is smooth. However, the scrolling is not smooth on Chrome occasionally. Well, for Firefox and IE, the scrolling is simply disappointing. It is very laggy.
This is my assumption right now: the reason that makes the scrolling so laggy is the way of the browser interpreting my code. However, I do not know which part of my code I should improve on.
My website is around 4.4MB. Is it because my website has too much to load? If that's the case, then why would Safari load my website so smoothly?
I'm not too familiar with html languages, thus, I don't understand the cause of this problem. Please help me!
Thanks :D
try analyzing your page here, it helped me a lot optimizing my sites:
https://developers.google.com/speed/pagespeed/insights/
Could be Hardware-dependent too, if you use different Devices for FF and Safari - some of my old Android Phones lag extremely...
I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.
I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.
I already changed all my animations (keyframes) from using position top/left to transform translate3D.
And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?
You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7
Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.
I think it is hard to make this work well on mobile devices today.
I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.
Google PageSpeed Insights
I have a Drupal 7 site with a fluid image grid (4x4). As the browser scales down, the images do as well so everything fits nicely.
This runs smoothly on my PCs in Firefox, Chrome, and Safari 5. On the several Macs I've tested, it runs well in Firefox and Chrome.
If I try to do this in Safari on a Mac, it is extremely choppy. However, Safari 5 on certain Macs seems to run just fine, but one was a bit choppy. Across the board, Safari 6 is not smooth at all.
So far I've tried getting rid of all my js files, and I've also compressed my css and js through Drupal's settings.
Any suggestions would be welcome. Thanks!
After going though all javascript and css transitions, I couldn't find anything. We then switched the site from a cheap shared godaddy server to Rackspace cloudsites. Everything is smooth as can be.
I am in no way pretending to be a developer, but I do try and code sites I design from time to time.
I am running into an issue where I used HTML5 Boilerplate to code a site and when on a desktop browser, it looks fine (http://cl.ly/image/3j0L3Q3k3W1S), but as soon as I move to Mobile Safari, the background seems to get nudged around quite a bit (http://cl.ly/image/0q0I2q1f1Y1c).
I've had the same problem with another site, so I'm assuming it's something in the code that I don't know about...
Any help with this would be greatly appreciated!
I'm unsure which browser is the best for a web development. I know that Firefox is the most favoured for the common but it also does tolerate programming failures, so it is not 100% strict.
With what browser should I develop my website to have the best result on all other browsers, so I don't have to fix too much in the CSS?
From personal experience.
I use chrome. For me 100% fine on chrome is like 70% on IE, so I switch between the two a lot.
Chrome 100% = 98% FF , 99.9% Safari and 70% IE.
This is what I've noticed from my experience.
I personally use Chrome, as its built-in developer tools work great, and it has the widest HTML5 support. However, that's not necessarily a good thing because even if your website works 100% with the better browsers, it will probably break with IE.
If you need your website to work with IE, you should constantly test with it. Use the lowest common denominator.
At this point, all of the major browsers implement a lot of CSS3 features a little differently (box-shadow vs -moz-box-shadow vs -webkit-box-shadow for instance). Honestly, your best bet is to use IE, Opera, Firefox and Chrome (I'm pretty sure Safari and Chrome both run off of webkit, so they should be the same). As for what to use as your primary browser, it all depends on what you're looking for really. I enjoy using Chrome, but others swear by Firefox (I find it too clunky).
Now as for older browser support, well that's just an entirely different discussion ;)
Simple answer, all the major ones.
When you develop for the web it's best to think from the view point of the user viewing the site. The main issue is that each browser will render a webpage a little different and that is the main problem you need to solve.
To help with this issue, you'll need to work with some cross-browser rending web-apps such as http://browsershots.org/
To more directly answer your question, I'd go with Chrome with Firebug. Asides from that, you should be able to create CSS browser-compliant sites with practice.
Good luck!
Develop in the browser of YOUR choice with the best development tools for YOU (e.g. Firebug, FirePHP in FF or the Developer Tools for Chrome). Try to use standard, crossbrowser compatible framworks for JS, CSS and available templates for HTML like "Boilerplate" HTML 5. And then test everything continously on the mainstream browsers (IE, FF, Chrome, Opera, Safari).
This way you won't waste your time afterwards fixing browser specific bugs...
I prefer using Firefox, simply because there are so many useful tools for it - Firebug, Web Developer's Toolbar and so on - but really it doesn't matter as long as it's not Internet Explorer.
This is because IE has so many quirks that it's best to get it right in all other browsers, then worry about adding workarounds or other fixes to make it look right in IE (getting things right in IE can take a very long time).