CSS animations are sometimes not smooth & performant.

[sypherphoenix]

I originally thought this issue might be related to Firefox, but it seems like it's mostly related to hardware acceleration. With hardware acceleration turned off, some pages will have very choppy animations or scrolling.

We aren't making a complicated site, so we don't want to need hardware acceleration in order to have a good experience.

Right now the issues are caused by the background styling sections in style.css. I think it's mostly related to the alpha blending employed.

mdva-melee/style/style.css

Lines 6 to 44 in 44f2e6a

	body {
	/* Color definitions */
	--color_theme_faint: hsl(0, 0%, 70%);
	--color_theme_dark: hsl(0, 0%, 14%);
	--color_theme_black: hsl(0, 0%, 4%);
	color: white;
	margin: 0px;
	font-family: 'FolkPro', sans-serif;
	overscroll-behavior: none;
	background-size: 200% 200%;
	background-image: repeating-linear-gradient(67.5deg, var(--color_theme_dark), var(--color_theme_black) 400px, var(--color_theme_black) 800px, var(--color_theme_dark) 1200px);
	animation: pan linear 15s infinite;
	}
	@keyframes pan {
	100% {
	background-position: 100%;
	}
	}
	.bg_stripes {
	background: repeating-linear-gradient(-22.5deg,
	var(--color_theme_black),
	var(--color_theme_black) 5px,
	rgba(0, 0, 0, 0) 5px,
	rgba(0, 0, 0, 0) 10px);
	}
	.bg_grid {
	padding-top: 10%;
	padding-bottom: 40%;
	background-size: 40px 40px;
	background-image:
	linear-gradient(to right, rgba(128, 128, 128, 0.25) 2px, transparent 2px),
	linear-gradient(to bottom, rgba(128, 128, 128, 0.25) 2px, transparent 2px);
	}

Alternatives need to be investigated such as using different tiling sizes, avoiding alpha, or using static images.

[sypherphoenix]

Removing the animation improves performance considerably but isn't the only cause. Maybe the method used to animate is also unnecessarily strenuous? (either by timing or by what is keyframed)

[sypherphoenix]

The diagonal line effect we're using is inspired by this page: https://codepen.io/Hyperplexed/pen/zYXZoZg

(see scrolling stripes on the bottom sides)

Maybe it can inform us about good practices (I'm not going to look at this now lol)