Is there a minimum possible size change in CSS?

Question

I wrote some JavaScript code to animate CSS properties of elements. I pass the following arguments to the function: amount, interval, and duration; amount being the change in the property (for example 200 could mean add 200 pixels to the element's width), interval being the time between two consecutive changes, and duration being the total duration of the animation.

The code works fine unless I pass the arguments in a way that the change in each interval becomes very small (like a tiny fraction of a pixel).

I know the code is working fine theoretically, as I get the change in console.

Any ideas about the problem?

Cheers.

UPDATE: the code:

function handleTimer (amount, interval, duration, execute, element) {
    let i = 0;
    let current = 0;
    let stepsCount = countSteps(interval, duration);
    let stepLength = calcStepLength(stepsCount, amount);
    let count = setTimeout(function addOneMore () {
        if ( i < stepsCount -1 ){
            i++;
            current += stepLength;

            execute(stepLength, element);
            if (current < amount) {
                count = setTimeout(addOneMore, interval)
            }
        } else {
            current = amount;
            execute(amount - (stepsCount -1) * stepLength, element);
        }
    }, interval)
}

function countSteps (interval, duration) {
    let remainder = duration % interval;
    let stepsCount;
    if (remainder) {
        stepsCount = Math.floor(duration / interval) + 1;
    } else {
        stepsCount = duration / interval;
    }
    return stepsCount;
}
function calcStepLength(stepsCount, amount) {
    return amount / stepsCount;
}


function resizeWidth (amount, element) {
    let widthSTR = $(element).css('width');
    let width = parseInt( widthSTR.substr( 0 , widthSTR.length - 2 ) );

    $(element).css('width', `${width + amount}px`);

}

So this:

handleTimer(218, 5, 200, resizeWidth, '.box');

works fine, but this:

handleTimer(218, 5, 2000, resizeWidth, '.box');

doesn't.

UPDATE 2: I know browsers are super accurate with pixels, like when you use percentages. Of course the value will be rounded before rendering since displays cant display half pixels, but the value is still calculated accurately. I don't know at what decimal the rounding occurs.

Answer 1

This happens because parseInt is rounding your number up.

Pay attention to this line:

let width = parseInt( widthSTR.substr( 0 , widthSTR.length - 2 ) );

if width is a decimal number, like 22.5px, it will be rounded up to 22.

If amount is less than 1, it won't reach 23 and when you round up the number again, you'll get 22 again and it becomes a loop.

You have two solutions:

• Use another variable to save the width value, avoiding to writing and reading it from CSS:

  let initialWidth = $(element).css('width');
  let savedWidth = widthSTR.substr(0, initialWidth, initialWidth.length - 2 ) );
  function resizeWidth (amount, element) {
    savedWidth += amount;
    $(element).css('width', `${savedWidth}px`);
  }
  

• Just use parseFloat in place of parseInt to don't round your number up:

  let width = parseFloat( widthSTR.substr( 0 , widthSTR.length - 2 ) );