CODEWITHSUNDEEP
htmlcssgoogle-chrome
Hosein
Hosein

Reputation: 581

CSS left using calc(percent + / - pixel) odd result

I have a huge div with size of 33,554,432x33,554,432 px on a page with absolute position. There are two divs inside it with these styles:

position: absolute; 
left: calc(64.2571% - 1px); 
top: 100px; 
width: 46px; 
height: 10px;

and

position: absolute; 
left: calc(64.2571% + 1px); 
top: 111px; 
width: 46px; 
height: 10px;

which should be placed 2 pixels different from each other, but there's absolutely no difference between the left position of them.

If I change the left properties to calc(64.2571% - 2px); and calc(64.2571% + 2px);, it's working fine.

I tried to post a fiddle with those conditions but at jsfiddle it works fine. I'm worried it's a silly problem, but I checked everything and can't solve it.

I'm using Chrome Version 51.0.2704.103 m.

I've just managed to make a similar fiddle.

Upvotes: 2

Views: 1577

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28437

I would believe this has to do with the way Chrome handles very large sizes, or possibly how other browsers handle them.

Even though you specify that you want the wrapper element to be 33554432px wide (more than 33 million pixels!!) Firefox only creates a space of 17895700 pixels (almost half). This is visible in your fiddle (slightly edited version, added console logs) when you open up the dev tools. After some digging, I found out that Gecko-based browsers do put these limits. Other browsers most definitely also have them in place (to prevent memory issues I presume), but for Geckos, it's at 17,895,700 pixels.

More precisely, as this website puts it:

Gecko-based browsers like Firefox show an interesting behavior when trying to make the site any higher than 18.939583 kilometers, “shrinking” or “collapsing” its main container.

If you convert that value to cm (a valid web unit), and set the item to this width (18939583cm) you'll see that this indeed agrees with the width in pixels I showed previously.

The point is that, even though your code should theoretically work on Chrome, it doesn't (probably because something goes wrong with the number crunching/rounding). That sucks. The upside is, though that it doesn't work on Firefox either - at least not in full, as it shrinks down the page. As a consequence it is probably better to find another way to achieve what you are doing -- instead of creating a canvas of more than 33 million pixels wide.

What comes to mind is ajax loading of content, and only showing the necessary parts (e.g. 1000px overflow in each direction). This will ensure a good loading time as well, though it may be harder to SEO optimise and implement.

EDIT: I didn't notice at first, but from the given fiddle it is also clear that Chrome puts a limit on the size! It's set at 33,554,428 pixels, which is almost the size you want.

Upvotes: 1

Related Questions