App-it.dk

Objective-C, iOS and Web.

Browser Pixel Rounding

When developing web applications, rich or not rich, it is worth noticing that not all browsers handle pixel roundings equally. This is not based on which engine (webkit, mozilla etc) is used. So even though ie. Safari and Chrome both use webkit, they do not round pixels the same way.

An example:

Pixel rounding example
1
2
3
4
<div style="width: 101px; background-color:red;">
  <div style="width=50%; background-color:green;"></div>
  <div style="width=50%; background-color:orange"></div>
</div>

The example above illustrates the problem. On Safari the two inner divs will each get a width of 50 pixels. This leaves one remaining pixel that’ll be visible in the middle of the two inner divs.

Firefox is clever enough to give each div a width of 50,5 pixels.

Chrome goes down the unfair path and gives one of the divs 51 pixels, and the other 50 pixels.

This goes to show that even if some browsers are using the same rendering engine, it does not necessarily mean that they’ll interpret CSS the exact same way.

Comments