From 377906ccfd83efd57406fe10865f789ed3130f10 Mon Sep 17 00:00:00 2001 From: baloneysandwiches Date: Mon, 16 Mar 2015 16:09:33 -0700 Subject: [PATCH] fix rounding errors in responsive carousel Clipping the edge of a crucial slide in a responsive carousel looks really bad. This currently happens way too easily. Two fixes: 1) Browsers don't seem to resolve all rounding-related layout issues until load. Listen for that as well as resize. 2) Don't round slide dimension up to the nearest integer. This causes overflow. All modern browsers have used subpixel rendering for a while now. See column 4 in this chart: http://cruft.io/posts/percentage-calculations-in-ie/ --- src/jquery.cycle2.carousel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/jquery.cycle2.carousel.js b/src/jquery.cycle2.carousel.js index cbc48dd..7159ce3 100644 --- a/src/jquery.cycle2.carousel.js +++ b/src/jquery.cycle2.carousel.js @@ -143,7 +143,7 @@ $.fn.cycle.transitions.carousel = { var prepareDimensions = this.prepareDimensions; // throttle resize event - $(window).on( 'resize', resizeThrottle); + $(window).on( 'load resize', resizeThrottle); opts._carouselResizeThrottle = resizeThrottle; onResize(); @@ -156,7 +156,6 @@ $.fn.cycle.transitions.carousel = { function onResize() { opts._carouselWrap.stop( false, true ); var slideWidth = opts.container.width() / opts.carouselVisible; - slideWidth = Math.ceil( slideWidth - adjustment ); opts._carouselWrap.children().width( slideWidth ); if ( opts._sentinel ) opts._sentinel.width( slideWidth );