I have a hosted web app that shows 30 pictures with fade in transitions. When I run this app on "Fire TV Stick" I will see a black screen flash once in a while. How could I get rid of this black screen flash?
This only happens on "Fire TV Stick". I've tried the same hosted web app from other devices like Fire TV 4K, Fire HD tablet, and other android tablets and I don't see the black screen flash.
This is a 100% reproducible. Run the app for couple minutes and watch the slideshow. After some time (maybe 30 seconds or so) you will see a black screen flash. Then, slideshow continues but you will continue to see a black screen flash once in a while.
In order to test, you can launch "Web App Tester" and go to "TEST HOSTED APP" and enter URL:
http://fire.img.test.s3-website-us-west-2.amazonaws.com/
HTML on the hosted web app:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080, user-scalable=no" /> <title>slideshow</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="index.js?t=32"></script> </head> <body style="margin: 0px; padding: 0px;"> <img id="bgImageID" style="display: block; position: absolute; left: 0px; top: 0px; width: 1920px; height: 1080px;" src="./images/001.jpg" /> <img id="mainImageID" style="display: block; position: absolute; left: 0px; top: 0px; width: 1920px; height: 1080px;" src="./images/001.jpg" /> </body> </html>
JS on hosted web app:
(function() {
// current slide index.
let sindex = 0;
// slides.
let imgArray = [
"./images/001.jpg",
"./images/002.jpg",
"./images/003.jpg",
"./images/004.jpg",
"./images/005.jpg",
"./images/006.jpg",
"./images/007.jpg",
"./images/008.jpg",
"./images/009.jpg",
"./images/010.jpg",
"./images/011.jpg",
"./images/012.jpg",
"./images/013.jpg",
"./images/014.jpg",
"./images/015.jpg",
"./images/016.jpg",
"./images/017.jpg",
"./images/018.jpg",
"./images/019.jpg",
"./images/020.jpg",
"./images/021.jpg",
"./images/022.jpg",
"./images/023.jpg",
"./images/024.jpg",
"./images/025.jpg",
"./images/026.jpg",
"./images/027.jpg",
"./images/028.jpg",
"./images/029.jpg",
"./images/030.jpg",
];
// show next slide.
let showNext = function() {
// show next slide after some delay.
setTimeout(function() {
// update index.
sindex = (sindex + 1) % imgArray.length;
// remove image src.
$("#mainImageID").hide().attr("src", "");
// continue when image is loaded.
$("#mainImageID").one("load", function() {
// load is done. fade it in.
$("#mainImageID").fadeIn(1000, "swing", function() {
$("#mainImageID").show();
// set bg to current image for next slide.
$("#bgImageID").attr("src", imgArray[sindex]);
// continue to next slide.
showNext();
});
});
// set new image to display.
$("#mainImageID").attr("src", imgArray[sindex]);
}, 500);
};
// on page load.
$(function() {
showNext();
});
})();
I'm using "Fire TV Stick" with latest software available as of 12/30/2019.
