One per frame last item breaks depending on OS

[drdreo]

I implented the one per frame sly scroll and it worked perfectly fine on macOS in the newest Chrome. But then i switched to a windows pc which uses the same chrome and the last item always breaks into new line. Appearing here in the references tab: Portfolio

I tested the mac version of the website on the same monitor, therefore, screen size ain't the problem. I did not distinguish or coded anything different for browsers or os. Here the reproduced JSFiddle. Tested it on macOS and it shows all 3 items in perfect alignment. On Windows, same screen, same browser, last item breaks.

Is there a fix to that problem?

[botondcs]

I implemented item based horizontal basic and have the same issue. It does appear on some screen sizes but not on others, I can't find any pattern in that behaviour.

I think it is a rounding problem. When I wait for all elements to render and then reduce say the margin of the last element by 1px it fits into the first line again.

~~This fixed it for now (the margin here is 0.25rem smaller than normal): $( '.class' ).last().css( 'margin', '0 1rem 0 0' );~~

This goes right after inits and reloads: sly.init(); sly.reload();

EDIT:

The solution above did not work all the time because the rounding seems to happen on each element not on their sum, so the more elements there are, the more rounding happens. Instead I now calculate the width of each element including comma values and round it up, and then resize the parent (aka slidee).

var totalWidth = 0;
var elementWidth = 0
var elementMargin = 0;
slyElement.each( function() {
  elementWidth = Math.ceil( $( this )[0].getBoundingClientRect().width );
  elementMargin = parseInt( $( this ).css( 'margin-right' ) );
  totalWidth = totalWidth + elementWidth + elementMargin;
} );
slySlidee.width( totalWidth );