Less repaints

pages/soundtracks/soundtracks.scarlet

@@ -10,6 +10,12 @@ const soundtrack-margin = 1rem
 	flex-basis 500px
 	margin soundtrack-margin 0
 
+	// If text-shadow is enabled, the whole container will repaint.
+	// We need to disable text-shadow to reduce re-painting.
+	a
+		:hover
+			text-shadow none
+
 > 500px
 	.soundtrack
 		margin soundtrack-margin

styles/grid.scarlet

@@ -9,15 +9,15 @@ mixin grid-cell
 	height anime-image-medium-height
 	max-width anime-image-medium-width
 	max-height anime-image-medium-height
-	// min-width 90px
-	// min-height 127px
 	border-radius ui-element-border-radius
-
-	// background-size cover
-	// background-position 50% 50%
-
 	margin 0.5rem
 
+	// If text-shadow is enabled, the whole container will repaint.
+	// We need to disable text-shadow to reduce re-painting.
+	a
+		:hover
+			text-shadow none
+
 mixin grid-text
 	vertical
 	width 100%

styles/image-title.scarlet

@@ -14,6 +14,6 @@
 .image-title-text
 	text-align center
 	color white
-	text-shadow 0 0 3px black
+	text-shadow 0 0 3px black !important
 	font-size 80%
 	line-height 1.8em

styles/mixins/anime-grid.scarlet

@@ -2,19 +2,23 @@ mixin anime-mini-item
 	margin 0.25rem
 	flex-basis anime-image-small-width
 
+	:hover
+		text-shadow none
+
 mixin anime-generic-item-image
 	object-fit cover
 	border-radius 2px
 	filter none
+	will-change filter
 	transition filter transition-speed ease, opacity transition-speed ease
 
 	:hover
 		filter saturate(1.3)
 
 mixin anime-mini-item-image
+	anime-generic-item-image
 	width anime-image-small-width !important
 	height anime-image-small-height !important
-	anime-generic-item-image
 
 	// Make it easier for the browser to layout by specifying max size as well
 	max-width anime-image-small-width

styles/tip.scarlet

@@ -10,6 +10,7 @@ mixin tip-before
 	z-index 100000
 	pointer-events none
 	opacity 0
+	will-change opacity
 	transform tip-transform-hidden
 	font-size 0.92rem
 	color text-color
@@ -30,6 +31,7 @@ mixin tip-after
 	z-index 100001
 	pointer-events none
 	opacity 0
+	will-change opacity
 	width 0
 	height 0
 	border-style solid