iv-org/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2024-10-01 01:35:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

CSS: Fix thumbnails' aspect ratio to prevent CLS (#4278)

Browse Source 
Force the thumbnails aspect ratio to 16/9 in order to prevent Cumulative Layout
Shifting (CLS) from hapenning during lazy loading.

It also fixes the problematic, taller thumbnails that Youtube returns for
playlists.

Closes issue 4002
This commit is contained in:
Samantaz Fox 2024-02-12 22:19:14 +01:00
commit 338d3d9f86
No known key found for this signature in database
GPG Key ID: F42821059186176E
1 changed files with 1 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/default.css
View File

@ -197,6 +197,7 @@ img.thumbnail {
display: block; /* See: https://stackoverflow.com/a/11635197 */ display: block; /* See: https://stackoverflow.com/a/11635197 */
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
aspect-ratio: 16 / 9;
} }
.thumbnail-placeholder { .thumbnail-placeholder {