What is the maximum allowed negative value for css left property?

Question

I have a scenario where I update the left value to show certain part of the div element. In my case the width of the div element is very long. I used the left property to move the div to/fro with animation.

Sample code:

$('.slides .next').live('click', function(){
  var pos = $(this).position();
  var newLeft = (pos.left - 700);
  $(this).animate({left: "-=left"}, 800);
  // I also tried this instead of the above=> $(this).animate({left: newLeft}, 800);
});

At some point the left value is getting larger with negative values (say: -8400px). When it goes beyond that, the left is automatically changing to 0px;

Any help greatly appreciated. Thanks

It can take as big values as you want, It wont change to 0px; — laaposto, Nov 04 '14 at 13:16
There has to be some limit, but reaching it means you should re-think your work. — Michael Laffargue, Nov 04 '14 at 13:20
possible duplicate of [What's the maximum pixel value of CSS width and height properties?](http://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties) — Paulie_D, Nov 04 '14 at 15:31

score 2 · Accepted Answer · answered Nov 04 '14 at 13:20

From MDN:

There is no official range of valid values. Opera supports values up to 2^15-1, IE up to 2^20-1 and other browsers even higher. During the CSS3 Values cycle there were a lot of discussion about setting a minimal limit to support: the latest decision, in April 2012 during the LC phase, was [-2^27-1; 2^27-1] # but other values like 2^24-1 and 2^30-1 were also proposed # #. The latest Editor's draft doesn't list a limit anymore.

score 2 · Answer 2 · answered Nov 04 '14 at 13:22

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.

Text from specification visible at:

http://www.w3.org/TR/css3-values/#lengths

Section: 4 Numeric Data Types

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

I had a bit of fun with this one. The other answers show there is no theoretical limit.

This answer gives a limit for width and height in Chrome of 33554428px. I independently arrived at the same value -1px in this example which suggests a practical limitation of 33554427px in Chrome.

Realistically - I would suggest that if a ceiling this large is limiting what you are trying to achieve, then you need to re-think your method of achieving it!

Example

In the example below, any left value 1px or more above -33554427px gives the same result. The tiny red line on the left is the div.

* {
  margin: 0;
  padding: 0;
}
div {
  width: 33554427px; /* any pixel sizes above this make no change */
  height: 1000px;
  height: 100vh;
  background: #F00;
  left: -33554426px; /* Change to -33554427px to hide completely */
  position: absolute;
}

<div></div>

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

I believe you can test this in browsers with the CSS inspector feature. Enter an enormous value into the property in the inspector. This is shown with width and height here:

Width and Height in CSS

edited May 23 '17 at 11:43

Community

1
1

answered Nov 04 '14 at 13:22

user2226786

111
1
8

score 0 · Answer 5 · answered Aug 22 '18 at 15:59

I tested this on button:

.toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 40px;

    strong{
        position: absolute;
        left: -99999999px;
    }
}

When this strong in pushed to far away, this button can't be clicked in JS. You can focus it on page, activate it by enter, but in JS click event does not work.

But when you change left from 99999999 to 9999999 (one digit less) this start to work.

This issue exist in Chrome/Opera, but not in Firefox.

Example to test: https://jsfiddle.net/6kaphqvz/1/

What is the maximum allowed negative value for css left property?

5 Answers5

Example

Linked