CSS calc and JS calculate are not equal each other

Question

I calculate item width in css , and do the same in js.
First one for element style, second one for carousel track calculation.

My CSS:

.category-carousel .carousel-item {
    width: calc((100vw - 80px) / 7); // result is 262.544px
}

and my JS:

 var itemWidth = (window.innerWidth - 80) / 7; // result is 262.857px

Result is 262.544 and 262.857.
(I use more then 200 elements , so 200 * 0.313 give me 62px of issue)

Why its work this way ?

DEMO

https://jsfiddle.net/2nwLq7vd/5/
Width and console result are not equal

@FerhatBAŞ i add fiddle for this question , please check that — , Oct 05 '17 at 13:02
Here is the description for innerWidth at jQuery documentation, http://api.jquery.com/innerwidth "Get the current computed inner width for the first element in the set of matched elements, including padding but not border" — Hamzeen Hameem, Oct 05 '17 at 16:29
@HamzeenHameem thanks for comment . I dont use border, margin or padding for items — , Oct 05 '17 at 16:31
@Arik Donowan The fiddle which you have shared above uses a 1px border. Below I have shared my solution but I have to agree with you on your observation with css calc() which has some mismatch with the value returned by javascript (although the JS value is correct). The best option for you would be to use a css preprocessor like Sass which are good at these calculations. You can read more about it in the following thread's accepted answer https://stackoverflow.com/questions/29505279/css-calc-multiplication-and-division-with-unit-ed-values. Hope this helps! — Hamzeen Hameem, Oct 05 '17 at 18:53
Still didnt find the right solution :/ I changed my js without css use — , Oct 08 '17 at 17:06

score 1 · Answer 1 · answered Oct 05 '17 at 13:21

1

You can what I changed in your code it is regarding to border padding when set 0 then it give to me same value You should add border, margin in your js calculation for each element

answered Oct 05 '17 at 13:21

Ferhat BAŞ

797
7
12

Sorry, Did you find the solution, if you didnt find then can you share real code then I can help you @Arik Donowan – Ferhat BAŞ Oct 06 '17 at 07:33

score 0 · Answer 2 · answered Oct 05 '17 at 17:43

It is because of the border you have set, please refer the image above. You can also find my fiddle here, https://jsfiddle.net/hamzeen/xour0ndm Here is my css:

div {
    width: calc((100vw - 80px) / 7); 
    height: 50px;
    display: inline-block;
    border: 0px solid;
    background-color: red;
}

CSS calc and JS calculate are not equal each other

2 Answers2