perf(14-01): add GPU promotion and containment to all scroll containers
- contain: layout style on :host of all 6 scroll-heavy components - contain: paint + will-change: transform on all scroll containers for GPU compositing - content-visibility: auto + contain-intrinsic-size on .album-card for off-screen skip - cover-grid, track-list, queue-panel, artists-view, genres-view, playlist-view
This commit is contained in:
@@ -223,12 +223,15 @@ export class ArtistsView
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.grid-scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
lit-virtualizer {
|
||||
|
||||
@@ -9,6 +9,7 @@ const gridStyles = css`
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -129,6 +130,8 @@ const gridStyles = css`
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -146,6 +149,8 @@ const gridStyles = css`
|
||||
transform 0.15s ease;
|
||||
box-sizing: border-box;
|
||||
width: var(--card-width, 176px);
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto var(--card-width, 176px) auto calc(var(--card-width, 176px) + 40px);
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
|
||||
@@ -227,12 +227,15 @@ export class GenresView
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.grid-scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
lit-virtualizer {
|
||||
|
||||
@@ -175,6 +175,7 @@ export class PlaylistView extends LitElement {
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -306,6 +307,8 @@ export class PlaylistView extends LitElement {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
|
||||
@@ -211,6 +211,7 @@ export class QueuePanel
|
||||
background-color: var(--yj-bg-surface, #212529);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
@@ -300,6 +301,8 @@ export class QueuePanel
|
||||
lit-virtualizer {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.track-item {
|
||||
|
||||
@@ -722,6 +722,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
@@ -931,6 +932,8 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
contain: paint;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.track-row {
|
||||
|
||||
Reference in New Issue
Block a user