diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css index 46bb9b01ca..33dc58bf0b 100644 --- a/dashboard-ui/css/nowplayingbar.css +++ b/dashboard-ui/css/nowplayingbar.css @@ -169,6 +169,7 @@ position: absolute; left: 0; right: 0; + top: 0; } .nowPlayingBarPositionContainer { diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js index 79a78e4082..fa629dd1df 100644 --- a/dashboard-ui/scripts/actionsheet.js +++ b/dashboard-ui/scripts/actionsheet.js @@ -99,7 +99,7 @@ document.body.appendChild(dlg); // The animations flicker in IE and Firefox (probably wherever the polyfill is used) - if (browserInfo.chrome) { + if (browserInfo.animate) { dlg.animationConfig = { // scale up 'entry': { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index ee889b85f7..b1f70da6e4 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2794,7 +2794,7 @@ dlg.exitAnimation = 'fade-out-animation'; // The animations flicker in IE and Firefox (probably wherever the polyfill is used) - if (browserInfo.chrome) { + if (browserInfo.animate) { dlg.animationConfig = { // scale up 'entry': { diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js index 4ad1c2973f..9d4b538806 100644 --- a/dashboard-ui/scripts/nowplayingbar.js +++ b/dashboard-ui/scripts/nowplayingbar.js @@ -70,7 +70,6 @@ return html; } - var isSlidUp; var height; function getHeight(elem) { @@ -85,35 +84,42 @@ function slideDown(elem) { - if (!isSlidUp) { + if (elem.classList.contains('hide')) { return; } - isSlidUp = false; + var onfinish = function() { + elem.classList.add('hide'); + }; + + if (!browserInfo.animate) { + onfinish(); + return; + } requestAnimationFrame(function () { var keyframes = [ { height: getHeight(elem), offset: 0 }, { height: '0', display: 'none', offset: 1 }]; var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' }; - elem.animate(keyframes, timing).onfinish = function () { - elem.classList.add('hide'); - }; + elem.animate(keyframes, timing).onfinish = onfinish; }); } function slideUp(elem) { - if (isSlidUp) { + if (!elem.classList.contains('hide')) { return; } - isSlidUp = true; + elem.classList.remove('hide'); + + if (!browserInfo.animate) { + return; + } requestAnimationFrame(function () { - elem.classList.remove('hide'); - var keyframes = [ { height: '0', offset: 0 }, { height: getHeight(elem), offset: 1 }]; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index c840b89fe2..f69f75c790 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2387,6 +2387,8 @@ var AppInfo = {}; browser.mobile = true; } + browser.animate = document.documentElement.animate != null; + window.browserInfo = browser; } diff --git a/dashboard-ui/thirdparty/jquery.unveil-custom.js b/dashboard-ui/thirdparty/jquery.unveil-custom.js index 0fa8b64e74..9100861a20 100644 --- a/dashboard-ui/thirdparty/jquery.unveil-custom.js +++ b/dashboard-ui/thirdparty/jquery.unveil-custom.js @@ -158,7 +158,7 @@ elem.setAttribute("src", url); } - if (browserInfo.chrome && !browserInfo.mobile) { + if (browserInfo.animate && !browserInfo.mobile) { if (!elem.classList.contains('noFade')) { fadeIn(elem, 1); }