All geek questions in one place

Differences in browser rendering at pixel level (width, height, ...) of DOM elements

I am working on an application that compares the displayed DOM in different browsers to find the differences. I see this as an alternative to the screenshot. In addition, this can be done programmatically with much less false positives (at least what I thought).

I calculate the actual position of the elements through element.getBoundingClientRect (), as suggested here: get the xy position of the html element .

I tried this on Firefox and Chrome and created a JSON DOM structure. Now I am really confused by what I have. I know that browsers handle pixel values ​​differently at the sub-pixel level, but that’s not how Chrome always has rounded numbers, and Firefox always has fractions. It almost always looks like this:

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 above.

The height is either exactly 1 or .5 higher than chrome.

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

I would never have expected something like that. It is especially strange that the values ​​are top and height . I would understand that the rendering is just different, and this leads to (irregular !!) different pixel values.

So my question is: if I do this comparison, can I get any rules from it? Does anyone know firefox rounding rules? Or should I make a tolerant comparison, where I check if the values ​​differ from unity by unity?

Update:

If you quickly want to test this yourself, just go to http://example.com/ (since it has a pretty small DOM) and enter document.getElementsByTagName("body")[0].getBoundingClientRect() in the javascript console on firefox and chrome. Y, height and upper values ​​are insanely long float values ​​in firefox, while they are shorter and strangely rounded in chrome.

+5
source share
2 answers

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

All coordinates relate to the viewing area, and its size varies in different browsers. The settings of the real browser screen (viewports minus tabs, toolbars, ui, etc.), Various algorithms for subpixel rendering, font rendering, the size of the white space around the elements of the embedded block, which depends on the font size - all these factors affect viewing area sizes and probably larger. Moreover, these factors very often change with each new version of the browser (plus users can change the settings), so any rules obtained from comparing the calculated values ​​are likely to have a limited value, if any.

Regarding processing subpixel values, I would suggest always using Math.floor to prevent any unwanted layout breaks or a more flexible design design regarding browser options.

+5
source

Source: https://habr.com/ru/post/1207610/

More articles:


All Articles