Sometimes Chrome is the broken browser (Or, How Chrome failed me twice in one night)

For several years it’s been generally accepted by the web-development community that Internet Explorer is nothing more than a means by which developers are subjected a great deal of emotional and mental trauma. Well, that has changed in the last couple of versions, but most developers are still licking their slow-healing wounds.

One thing that bothers me though is how so many automatically feel as though these types of issues only exist with Internet Explorer, generally touting Google Chrome as the full-featured flawless alternative. Granted, Google has done an outstanding job with the Chrome browser, and I personally use it for most of my work, but Chrome is in no way special. It too is capable of causing a lot of upset – such was the case this evening for me.

I worked on a couple of marquee demos over the last few days which gave me another idea. I wanted to cover an element with its ::after pseudo-element, apply a transparent-to-black background on the pseudo-element, and then animate it off to the right using @keyframes. I didn’t want this to be visible as it moved off to the right, so I applied a parent element of the same dimensions, and set its overflow to hidden. Queue the tears.

Chrome 24, wouldn’t respond. It just sat there, frozen. I could have sworn I did something wrong, but the demo was so simple in its construction. Where was I going wrong? I ended up testing the same demo in Internet Explorer 10, and found it it immediately kicked off without any problems. So, back to Chrome – it turns out there was a question on Stack Overflow asked some time back regarding this very issue, which led me to news that Chrome had apparently fixed this in version 26 (unstable at the time of this writing).

Opening up Canary, I was pleased to see that my pseudo-elements were indeed being animated. Nice work Chrome! This was the first issue tonight where Internet Explorer 10 was working as expected, and Chrome was not. Next I noticed the pseudo-element bleeding out over the rounded edges of the parent; that’s not supposed to happen when you’ve got overflow:hidden set – right?

Back to Internet Explorer 10, I confirm that overflow:hidden does as it advertises, and the pseudo-element is not visible outside of its parents rounded corners – way to go Internet Explorer 10! But I still needed an unequivocal demonstration of this bug to confirm if Chrome was indeed busted, and misbehaving. That demo is now available online. As of today (January 20, 2013), this demo is broken in all versions of Chrome, but working in Internet Explorer 10 and Firefox.

So what’s the story here? The take-away is that Internet Explorer is no longer the browser it used to be. It’s a fully-qualified modern browser capable of some really killer things. It is well-built, and carries as much respect for standards as its competition. Chrome, on the other hand, did not come down to us from the gods of Mount Chrominus. It too is flawed in some ways, while brilliant in others.

Jumping on the one-browser-to-rule-them-all bandwagon doesn’t help the developer’s plight, it worsens it. Advocate standards, not browsers. Get behind good practices such as progressive-enhancement, feature-detection, and when necessary polyfills. Don’t champion a browser, champion the web.

Sometimes Chrome is the broken browser – it happens.


6 thoughts on “Sometimes Chrome is the broken browser (Or, How Chrome failed me twice in one night)”

  1. Does this matter? The real problem isn’t limited to simply IE. Consider that the real problem lies in legacy IE, which never seems to go away as there are gazillions with Windows machines, which never get upgraded. Hence, vintage IE, with all its incompatible glory!

    1. This most definitely matters, because the criticism that “IE” receives online is general, and not specific to oldIE. It is assumed that Internet Explorer 10 is just as painful to use as Internet Explorer 6. It’s about time we give them some credit, and divorce our past experiences from their current product.

      1. (here via the firehose)

        I don’t believe that’s valid at all. Microsoft can ship their next version with unicorn dust and it will still be mired. It doesn’t matter how good their newer versions are as long as the legacy problem exists. If they wanted to REALLY do the web a favor, they’d take care of that problem first. Instead, they put up cutesie websites and get authors to talk about how great their newer versions are. The fact of the matter is that until the legacy problem is no more, and we’re able to simply say “use the latest version” like *every other browser out there* IE will still be a royal pain in the ass.

        And kudos for unintentionally highlighting other reasons why Chrome is superior to IE: quick release cycles, easy access to issue reporting, and an open and available development team not bogged by bureaucracy.

        I’m sorry, but this really reads like nothing more than a puff piece for IE.

        1. Frank, thanks for dropping in and sharing your thoughts – they’re much appreciated. By the way, what’s “the firehose”?

          With regards to the legacy-issue, Microsoft has done a great deal to try and “fix the problem”.

          As you pointed out, they’ve created initiatives to educate users on the importance of upgrading to a more modern version.

          Additionally, they’ve even pushed out updates via system updates. But these efforts are cut short by many on the receiving-end for various reasons. For starters, there is an absurd number of pirated copies of Windows out in the wild that can’t perform updates; what’s Microsoft to do?

          Secondly, as we’ve covered, there are many companies that have developed a dependency on Internet Explorer 6 (fortunately 6’s market share is dropping rapidly; I believe Internet Explorer 10 adoption is quicker and IE6 abandonment too). This dependency has become a financial necessity for many, and is not something they could easily change.

          Microsoft has also taken the liberty to pay out of their own pocket to share free support for many developers online. Their Developer Evangelist Program is full of examples like this; follow Rey Bango (@reybango) for example after example. Rey is one of many developers working for Microsoft with the focus of spreading good practices and adherence to standards online.

          I sincerely cannot think of more that Microsoft could do to make things easier – their plight is the direct result of their early-success in the browser-wars of the 90’s. Had Netscape won-out, we’d be hating on Firefox right now. And if Google had a browser out and won the popularity contest, they would be the butt of many jokes today.

          The point of this blog entry is to show that Internet Explorer and Chrome are more alike than many would like to admit (because it’s not cool to do so). Both are great browsers, and both still have their issues. One area where Chrome is clearly leading is in its in-browser developer tools; Internet Explorer 10 (while great) has some serious catching up to do there.

  2. Like most web designers I’m paying attention to IE10, but overall I would say that I’m not really that bothered with it. It has a history of being below par. It is this tarnished history that will remain with it for a very long time!

Leave a Reply

Your email address will not be published. Required fields are marked *