39

What are the largest valid px values that CSS width and height properties accept?

(I'm currently building a webapp that creates a very large zoomable container element and I want to know what are the actual limits.)

Stas Bichenko
  • 13,013
  • 8
  • 45
  • 83
  • 1
    Its dependent upon the UA - there is no single value to go by – Adrift May 19 '13 at 17:46
  • @Adrift Please elaborate. – Stas Bichenko May 19 '13 at 17:47
  • 5
    `"CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions.`" - Section 4 in the [Values and Units Module](http://www.w3.org/TR/css3-values/#lengths) - So you'd have to figure it out for each browser. – Adrift May 19 '13 at 17:54

1 Answers1

39

Using the CSS inspector that comes with certain browsers on an element with 10000000000px width and height:

Firefox: 33554400px
Chrome:  33554428px
Opera:   33554428px
IE 9:    21474836.47px
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 5
    IE7 says.... 134217727px <- No, I didn't miss the decimal. Tested these using http://jsfiddle.net/SQ7Lz/ – colllin Jul 21 '14 at 22:38
  • 1
    MS Edge reports 10737418.23px – Chris Seufert Sep 15 '15 at 07:07
  • Unfortunately you can't trust CSS inspectors. For example in IE11, if you set something to have a height of 6 million pixels the inspector will report it as -184070.03px; but with javascript you can see that it is 1533916.875px. This is the maximum height you can set via css in both IE11 and Edge. What @colllin has shown is that you can make elements larger than that limit putting elements inside them. I've been looking at this issue recently: https://jsfiddle.net/JoolsCaesar/aczx25u4/8/ – Jools Jan 24 '17 at 16:03
  • Also, IE11 and Edge completely fail to parse the CSS (10000000000px ) in @JamesDonnelly's jsfiddle, so they just have a height of 18px. Not only that there are strange and conflicting limits for all kinds of values, for example the scrollHeight that IE can report is much lower than what it can have, so you have scrollTop, much larger than your scrollHeight (Can be seen in that fiddle ^). – Jools Jan 24 '17 at 16:07