Ever wondered which browser would work best overall for you and then reached a total deadlock? Right now that’s where I am.
Having built and used websites for over 13 years, I’m stilling arriving at dilemas over which is best. First it was Netscape vs. Internet Explorer 4, then Mozilla vs. IE6 vs. IE7, then Firefox vs IE7.
In my early years of browsing the web, hardly any of my choices were based on development until more recently. With IE6 vs IE7 it all boiled down to IE6 having a simpler GUI which was far more usable. Then come IE7 and Firefox, it all boiled down to Firebug and it’s extension brothers and sister.
I’m back to a new choice, but my choice wont be made like the average user would as I’m considering what will make development easier. If I didn’t build websites, I’m pretty sure I’d pick Chrome because of how simple and quick it loads. Oh and the brand name definitely helps too, I really believe Microsoft’s brand had a huge factor in my decision originally.
Currently I’m battling over using the following two browsers: Google Chrome and Firefox and here is why:
Chrome’s pros are:
Blazingly fast
When Flash or something else crashes I only lose 1 tab
LiveReload
Developer tools usable
Firefox’s pros are:
Firebug’s CSS has autocomplete
Measuring tool works really nicely
FireSASS is just amazing for SASS
Sites not fully working and just being a lot more familiar with Firefox shortcuts holds me back from working/browsing 100% in Chrome. But what do you use and why? How have you made your transitions from one to the other as smooth as possible? Which do you believe will be the best in the future and why?
Despite being such a loyal Firefox user for now 5 years, I’m starting to be swayed by Chrome. Yet until fireSASS and other tools get ported it’ll be 50/50 for me.
PS. I wont be considering IE9 because I work on a Mac at home.
Update: If you actually specify a height & width on the image, the height does get added to the overall container height when webkit calculates it.
I’ve also decided to totally avoid keeping the background image for the graph paper on the actual div itself and put it on the container.
After reading more from the CSS-Tricks article mentioned this seemed like the most appropriate method for the job! While it makes the implementation a bit more abstract, using CSS means that it will work without JavaScript.
An hour ago I started trying to debug my portfolio page – the issue was around heights not being fully calculated by Chrome (I’m using javaScript to resolve the heights of the sidebar + the content lists). Only when you navigate away and back through links, can you see the proper height rendered to display all the content.
After much googling of the words “Chrome javascript refresh height” – I discovered other people with the same issues (here, here and here) – but it seemed that no one had linked up in their heads what was the real problem.
Then I started to hit Safari (it’s also a webkit browser) and realised my search arguments weren’t refined enough. Then bam! I’d found the blog post “is webKit too fast for it’s own good” which confirmed a suspicion.
The images in the content were not being taken into account for when webKit calculates the overall height of the container element and thus calculates minus all those god damned images. These are sad times if you have a combined image tower of webkit doom that equals 1000++ pixels and counting of invisable-ness.
I’m thinking of making webkit count the element height of all the images within the wrapper and have it write out, “I will not take your images for granted,” a few hundred times.