diff --git a/apps/music/index.html b/apps/music/index.html index 1edde0a4213a..c9e02c392a59 100644 --- a/apps/music/index.html +++ b/apps/music/index.html @@ -23,6 +23,7 @@ + diff --git a/apps/music/js/music.js b/apps/music/js/music.js index c1be9baa738c..d8fd55ff98ca 100644 --- a/apps/music/js/music.js +++ b/apps/music/js/music.js @@ -1965,3 +1965,13 @@ var TabBar = { } } }; + +window.addEventListener('scrollstart', function onScroll(e) { + var views = document.getElementById('views'); + views.classList.add('scrolling'); +}); + +window.addEventListener('scrollend', function onScroll(e) { + var views = document.getElementById('views'); + views.classList.remove('scrolling'); +}); diff --git a/apps/music/style/music.css b/apps/music/style/music.css index a14ee3694ef0..1da1c230ff30 100644 --- a/apps/music/style/music.css +++ b/apps/music/style/music.css @@ -286,7 +286,7 @@ body.picker-mode #title-player { #views-tiles, #views-list, #views-sublist { - height: 100%; + height: calc(100% - 4.5rem); overflow-x: hidden; overflow-y: auto; background-color: #0E1214; @@ -445,6 +445,13 @@ body.picker-mode #title-player { /* We set a background URL here when the thumbnail loads */ } +/* Favor scrolling performance over quality while scrolling */ +#views.scroll li.list-item, +#views.scrolling .tile { + image-rendering: -moz-crisp-edges; + text-rendering: optimizeSpeed; +} + .main-tile { width: 66%; height: 0; @@ -475,11 +482,6 @@ body.picker-mode #title-player { overflow: hidden; } -.main-tile:last-child, -.sub-tile:last-child { - margin-bottom: 4.5rem; -} - .tile-container { position: absolute; top: 0; @@ -939,10 +941,6 @@ button::-moz-focus-inner { display: none; } -li:last-child { - margin-bottom: 4rem; -} - li.list-header { list-style-type: none; position: relative;