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;