Are decimal pixels in css supported in multiple browsers?

Question

I'm using width:331.25px in my css. It is working on chrome and safari but I haven't tested in others yet. Is this correct and should it be used?

http://stackoverflow.com/q/4308989/3597276 – Michael Benjamin Dec 05 '15 at 17:58 — Michael Benjamin, Dec 05 '15 at 17:58

score 0 · Answer 1 · answered Dec 05 '15 at 18:13

I can't use decimal points for css value when measured in px. But, using this will not cause any error cause the number will be rounded to nearest integer value. for example- 331.1px will be 331px and 331.7px will be displayed as 332px.

Even though the displayed value will be rounded the decimal value will be remain in the memory for subsequent child calculation. and this may cause noticeable impact on output.

So, my opinion is that should be avoided.

Sagi Levi · Accepted Answer · 2015-12-05T18:07:51.730

-2

Using decimal pixels is incorrect. Pixel should be a single dot on the screen. Therefore, size can only be complete with no floating numbers. The decimal value will be used only when you will increase the zoom level and will be increased proportionaly to it.

Example: http://jsfiddle.net/x2bdrdy6/ in the example above you can see that the 50.5px is rounded upp and equals to the 51px.

#body1{
  height: 50px;
  width:100px;
  background: red;  
}

#body2{
  height: 50px;
  width:100.5px;
  background: green;  
}

#body3{
  height: 50px;
  width:101px;
  background: blue;  
}

edited Dec 05 '15 at 18:07

answered Dec 05 '15 at 17:59

Sagi Levi

305
1
11

What about with percentages? For example would `33.3%` be correct? – Joe Scotto Dec 05 '15 at 18:12
percentages will work but in the end will also be rounded. for example: 33.3% from 60px will result 20px as it should but from 20px it will supposed to be 6.66667 but it will be rounded up to 7px. – Sagi Levi Dec 05 '15 at 18:13

Are decimal pixels in css supported in multiple browsers?

2 Answers2