Overclock.net › Forums › Software, Programming and Coding › Other Software › Browser Rendering Comparison: OCN
New Posts  All Forums:Forum Nav:

Browser Rendering Comparison: OCN

post #1 of 3
Thread Starter 
Intro

This is something I've been wanting to do for a long time, and with the release of IE9 I figured I would get it over with.

When people talk about browsers all they usually talk about is speed. Browser A loads pages this fast, or Browser B scores this many points in Benchmark X.

None of that really matters (well, the page loading is important, but its hard to measure, and seldom tested)


What really matters is how well a page renders, and there is no more important site that OCN. Now, OCN isn't perfect, with 126 errors reported by w3's markup validation, but its still important to maintain consistency across web browsers.


I will be comparing how the 4 main web browsers render OCN by taking the difference of key aspects of the site. For those unfamiliar with the term, taking the difference of two images is literally subtracting the color values of one image from another. This will show at the pixel level how each browser renders.

Results
I've hidden the results inside spoilers so you don't break your scroll wheel reading this post.




The biggest difference in how each browser renders OCN's header is the size of the elements. Whether this is OCN's fault or the browsers is unknown. The point is that each web browser uses different numbers, and there is no way to tell which browser is correct.

One point to notice is that Opera, IE, and Chrome all render the first part of the links bar identically. The only difference here is spacing between links.

Firefox however renders the text differently. Lets take a look at that difference shall we?



When you align the welcome text it is clear that Opera, Chrome, and IE all render the text exactly the same way, down to the last pixel. "A ha!", you say, "This must mean that they are all correct!"

But what about Firefox? Taking the difference shows a huge discrepancy. Firefox apparently isn't even using the right font!

Advantage: Opera 11, Chrome 11, IE 9.
Disadvantage: Firefox 4





Looking at the formatting its clear we have 2 camps on this issue. Firefox and Chrome render it one way, IE9 and Opera render another way. Which way is correct? Hard to say.

Formatting aside, taking the difference shows a number of things:

IE9 and Opera differ only in vertical spacing and the way they handle the "..." of the truncated text. Otherwise they are identical.

Firefox and Chrome differ in more obvious ways. The key thing to look at here is the OCN flames. Notice how the 5th flame is missing? That means they are in the same place. What is happening here is that Firefox and Chrome are handling the line spacing differently, but even when they are aligned, Firefox is still off in it's own little world as far as text goes.

The final two images are different alignments of Opera and Chrome. Its clear that Chrome is indeed rendering everything correctly, and that it is just the horizontal widths that differ.


Advantage: Opera 11 and IE9 are very close in rendering.
Neutral: Chrome 11 differs in width, but its could still be the correct version.
Disadvantage: Firefox 4






All of the browsers differ in the size of the sub-forum layout. Chrome 11 and Opera 11 are both fairly close here. There is a slight variation in horizontal width, but the text matches up very well.

IE 9 once again does a good job rendering text, but it is very compacted compared to all of the other browsers. This is a legacy issue that was present even in IE6 code, and sharing rendering issues with a browser as awful as IE6 is bad news for Microsoft's latest browser.

Firefox 4 varies slightly as compared to Opera and Chrome, but its nowhere near as bad as IE. The most interesting thing here is the chromatic effect we get on the Intel General text. This is caused by the blurred appearance of Firefox's text.

Advantage: Opera 11 and Chrome are once again very similar.
Disadvantage: Firefox 4 still can't render text, and IE 9 is stuck with legacy Trident engine errors.



Thats all I'm willing to do for now. I'll try and get comparisons of the thread view and the wysiwyg editor up soon.

So far its looking good for Opera and Chrome, with IE9 doing surprisingly well, despite still rendering like IE6. Its also abundantly clear that the latest Firefox has serious issues. The blurred, inaccurate text simply won't do. Unfortunately Firefox 4 is already in the release candidate stage, which means it is feature complete. Mozilla had better make good on it's promise of Firefox 5 following shortly, because so far Firefox 4 is looking like a piece of trash.
    
CPUMotherboardGraphicsRAM
Core i5 4670k ASUS Maximus VI Gene Gigabyte GTX 460 1GB Kingston Hyper-X 
Hard DriveHard DriveHard DriveHard Drive
Samsung 830 OCZ Vertex 3 WD6401AALS WD5000AAKS 
CoolingOSMonitorMonitor
Noctua NH-D14 elementary OS Dell Ultrasharp U2312HM LG W2442PA-BF 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750W Corsair Graphite 600T Logitech G700 
Audio
ASUS Xonar DG 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Core i5 4670k ASUS Maximus VI Gene Gigabyte GTX 460 1GB Kingston Hyper-X 
Hard DriveHard DriveHard DriveHard Drive
Samsung 830 OCZ Vertex 3 WD6401AALS WD5000AAKS 
CoolingOSMonitorMonitor
Noctua NH-D14 elementary OS Dell Ultrasharp U2312HM LG W2442PA-BF 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750W Corsair Graphite 600T Logitech G700 
Audio
ASUS Xonar DG 
  hide details  
Reply
post #2 of 3
NIce to see that someone does care. Nice work, must of taken quite a bit of time. But i guess i wount really be caring as Firefox is the browser im most used to and i like the most. And the fact that im nearly blind anyway.
Sorry
post #3 of 3
I'm not anywhere near to being blind, and well this Firefox "text" issue, doesn't really seem like a big deal to me. At all.

In fact, I wouldn't have even noticed it until I saw this. So meh tongue.gif Firefox is still the best tongue.gif
White Giant
(16 items)
 
  
CPUMotherboardGraphicsRAM
i5 4670k Asus Maximus IV Hero AMD R290 Reference G. Skill Ripjaws X 
CoolingCoolingCoolingCooling
CPU- EK Clean CSQ GPU- EK R290  Alphacool UT60 EK Resevoir with D5 vario pump 
OSMonitorKeyboardPower
Windows 8.1 64-bit Tempest Overlord SE 27" Filco Ninja with white PBT blank keycaps Seasonic X-750 
CaseMouseMouse PadAudio
NZXT Switch 810 Logitech G400 Puretrak Talent Audio Technica Ath-AD700 
  hide details  
Reply
White Giant
(16 items)
 
  
CPUMotherboardGraphicsRAM
i5 4670k Asus Maximus IV Hero AMD R290 Reference G. Skill Ripjaws X 
CoolingCoolingCoolingCooling
CPU- EK Clean CSQ GPU- EK R290  Alphacool UT60 EK Resevoir with D5 vario pump 
OSMonitorKeyboardPower
Windows 8.1 64-bit Tempest Overlord SE 27" Filco Ninja with white PBT blank keycaps Seasonic X-750 
CaseMouseMouse PadAudio
NZXT Switch 810 Logitech G400 Puretrak Talent Audio Technica Ath-AD700 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Other Software
Overclock.net › Forums › Software, Programming and Coding › Other Software › Browser Rendering Comparison: OCN