5

I am working on an application that compares the rendered DOM in different browsers in order to find differences. I See it as an alternative to making a screenshot comparison. Also, this can be done programmatically with lot less false positives (at least that's what I thought).

I compute the actual position of the elements via element.getBoundingClientRect() as suggested here: retrieve the position x y of an html element.

I tried it on Firefox and Chrome and generated a JSON DOM structure from that. Now I am really confused about what I got. I know that browsers handle pixel values differently on the sub-pixel level, but it's not like Chrome always has rounded numbers and Firefox always has fractions. It almost always looks like that:

Firefox

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390.5",
      "left": "824.61669921875",
      "width": "123.38333129882812",
      "height": "27"
    }
}

Chrome

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390",
      "left": "824.640625",
      "width": "123.359375",
      "height": "27"
    }
  }

The top value in chrome is always an integer whereas in firefox it is always the same value but either .5 or .25 higher.

Height is either exactly 1 or .5 higher than in chrome.

All other values are sometimes fractions in both of the browsers. If they are fractions, they are never equal (firefox always has the higher value). If they are integers, they are the same.

I would have never expected something like this. Especially the weird thing about top and height values. I would have though that the rendering just differs and this results in (irregular!!) different pixel values.

So my question: if I do this comparison, can I derive any rules from that? Does anyone know the rounding rules of firefox? Or will I have to make a tolerant comparison where I check whether the values are more than 1 unit apart from each other?

Update:

If you quickly want to check this yourself, just go to http://example.com/ (as this has a quite tiny DOM) and enterdocument.getElementsByTagName("body")[0].getBoundingClientRect() in the javascript console on firefox and chrome. Y, height and top values are insanely long float values in firefox, whereas in they are shorter and strangely rounded in chrome.

marked-down
  • 9,958
  • 22
  • 87
  • 150
Schnodderbalken
  • 3,257
  • 4
  • 34
  • 60
  • Different browsers have different default CSS values for DOM elements. Have you tried doing a CSS reset, like this one? http://meyerweb.com/eric/tools/css/reset/. This will remove all default browser CSS on DOM elements. – Scott Rowell Nov 24 '14 at 18:53
  • 1
    Is this really a good idea? If my aim is to find out whether elements are displayed differently on different browsers, won't I destroy the "untouched" styling environment by resetting some of the styles? I mean because let's say I conclude that two elements are the same after applying the reset. That could also mean that the reset caused the elements to have the same styling. – Schnodderbalken Nov 24 '14 at 19:10
  • Ah, I misunderstood your goal. From my experience, elements are going to be displayed different on different browsers no matter what -- even if its by a fraction of a pixel. – Scott Rowell Nov 24 '14 at 19:48
  • Can you provide a JSfiddle or whatever that we can test, so that we all know we're looking at the same DOM tree. I mean, a quick test doesn't show any fractions output for Firefox. – Mr Lister Nov 25 '14 at 06:43
  • What sort of test didn't show fractions? If I go to http://www.example.com and execute document.getElementsByTagName("body")[0].getBoundingClientRect() on firefox and chrome, it shows me two json objects with completely different values. – Schnodderbalken Nov 25 '14 at 18:18

2 Answers2

5

The returned value of ClientRect() is TextRectangle, see here: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect

All coordinates are relative to the viewport and size of it differs in various browsers. Browser real screen estate (viewport minus tabs, toolbars, ui etc.), different algorithms for sub-pixel rendering, font rendering, size of white space around inline-block elements which depends on defult font size - these are all factors that impact viewport dimensions and there are probably more. More so, these factors vary very often with every new browser version (plus users can alter settings), so any rules derived from comparison of calculated values would probably have limited value if any.

As for handling sub-pixel values I would suggest always using Math.floor to prevent any unwanted layout breakage or adjust design to be more flexible regarding browser variations.

Teo Dragovic
  • 3,438
  • 20
  • 34
  • And for example the height difference in my example (http://www.example.com) is that to be explained by different font renderings? – Schnodderbalken Nov 27 '14 at 19:56
  • Hmm, it seems so. If you use `getBoundingClientRect` on root element and try using different browser zoom levels it will put out different results for height (wich in case of root element is same as bottom since height = bottom - top). Also, if you put `html { height: 100%; }` and test output on different window sizes you will also get different result. I never knew that, it's kinda interesting :) – Teo Dragovic Nov 27 '14 at 20:53
0

Different browsers use different style sheets.

Chrome : http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?order=name

Firefox : http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css

Reference

Try using few popular Reset CSS

Community
  • 1
  • 1
VenomVendor
  • 15,064
  • 13
  • 65
  • 96
  • How wILL I be able to tell whether the difference between the styles occurs because of the reset or because it was already there before? Because differences in the rendered DOM are what I what to find. – Schnodderbalken Nov 26 '14 at 20:45