Javascript Slide Animation Broken in Firefox

I use CSS transitions to make an image slide across a <div> on my page. First, here is the code:
[jsfiddle.net...]

It works properly in Webkit, but it does not work properly in Firefox. Originally, it didn't work in Webkit either (failed in the same way). That was when it was suggested that I put lines 17 and 18 inside a setTimeout function, that way the page will update before the position change.

This fix works perfectly in Safari and Chrome, but very sporadically in Firefox. It would seem that line 17 is running before the results of line 13 get added to the page. So the move is instant, not animated like I want.

Also let me give you a description of what this does. There is an image sitting inside a div box. Every loop through my function, a new image is created inside the div box, to the right of the current one. It is not visible because the box hides overflow. Then both images, the new and the old, change their Left property to animate a simultaneous slide to the left. Then the 'old' image, now invisible and to the left of the visible image, is deleted. This isn't the exact code I'm using on my site but it's very similar, and is having the same rendering problem.

And finally, if you prefer code in the post instead of a jsfiddle link, well then here you go:


var $products;

$products = document.getElementById("products");
setInterval(slide_image,3000);

function slide_image()
{
var $new_image = document.createElement("img");
$new_image.setAttribute("alt","Mac");
$new_image.setAttribute("id","new_item");
$new_image.setAttribute("src","http://new.www.macfixer.com/product_images/apple_watch_2018.png");
$new_image.style.left = "202px";
$products.append($new_image);

 setTimeout(function() 
 {
 $products.querySelector("#new_item").style.left = "0px";
 $products.querySelector("#current_item").style.left = "-202px";
 }, 0);

setTimeout(function()
 {
 $products.removeChild($products.querySelector("#current_item"));
 $products.querySelector("#new_item").setAttribute("id","current_item");
 },1500);
 }

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>code for l008comm</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <div id="products"> <img id="current_item" src="http://new.www.macfixer.com/product_images/apple_watch_2018.png" width="384" height="384" alt="Products"> </div> <script src="slider.js"></script> </body> </html>

body { text-align: center; } #products { position: relative; display: inline-block; cursor: pointer; height: 12em; width: 12em; padding: 1em; overflow: hidden; border: solid 1px #999; } #products > img { position: absolute; top: 1em; left: 1em; width: 12em; height: auto; transition: left 1.5s ease-in-out; }

( function( d ) { var products, product_timer, slide_hold = false, pointer = 0, slide_image_timer = 5000, // Time between automated slides speed, new_image, image_list = [ 'http://new.www.macfixer.com/product_images/appletv_2017.png', 'http://new.www.macfixer.com/product_images/macbook_air_2018.png', 'http://new.www.macfixer.com/product_images/macmini_2018.png', 'http://new.www.macfixer.com/product_images/imac_2017.png', 'http://new.www.macfixer.com/product_images/mojave_2018.png', 'http://new.www.macfixer.com/product_images/macpro_2013.png', 'http://new.www.macfixer.com/product_images/ipad_2017.png', 'http://new.www.macfixer.com/product_images/apple_watch_2018.png', 'http://new.www.macfixer.com/product_images/macbook_pro_2018.png', 'http://new.www.macfixer.com/product_images/iphone_xr_2018.png', 'http://new.www.macfixer.com/product_images/ipod_2017.png' ]; products = d.getElementById('products'); product_timer = setTimeout( slide_image , slide_image_timer ); function slide_image(speed) { slide_hold = true; if (speed === undefined) { speed = 1500; } new_image = d.createElement('img'); new_image.setAttribute('alt','Mac'); new_image.setAttribute('id','new_item'); new_image.setAttribute('src',get_next_product()); new_image.style.left = '202px';new_image.style.left = '14em'; new_image.onload = function() { setTimeout(function() { products.querySelector('#new_item').style.left = '1em'; products.querySelector('#new_item').style.transitionDuration = speed + 'ms'; products.querySelector('#current_item').style.left = '-14em'; products.querySelector('#current_item').style.transitionDuration = speed + 'ms'; },1); setTimeout(function() { products.removeChild(products.querySelector('#current_item')); products.querySelector('#new_item').setAttribute('id','current_item'); slide_hold = false; product_timer = setTimeout( slide_image , slide_image_timer - speed ); },speed); }; products.append(new_image); } function get_next_product() { pointer ++; if (pointer >= image_list.length) { pointer = 0; } return image_list[pointer]; } }( document ) );

image_list = [ 'https://www.macfixer.com/product_images/appletv_2017.png', 'https://www.macfixer.com/product_images/macbook_air_2018.png', 'https://www.macfixer.com/product_images/macmini_2018.png', 'https://www.macfixer.com/product_images/imac_2017.png', 'https://www.macfixer.com/product_images/mojave_2018.png', 'https://www.macfixer.com/product_images/macpro_2013.png', 'https://www.macfixer.com/product_images/ipad_2017.png', 'https://www.macfixer.com/product_images/apple_watch_2018.png', 'https://www.macfixer.com/product_images/macbook_pro_2018.png', 'https://www.macfixer.com/product_images/iphone_xr_2018.png', 'https://www.macfixer.com/product_images/ipod_2017.png' ];

Javascript Slide Animation Broken in Firefox

l008comm

NickMNS

coothead

l008comm

l008comm

coothead

l008comm

l008comm

coothead

coothead

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week