mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
99 lines
2.1 KiB
CSS
99 lines
2.1 KiB
CSS
/**
|
|
* Performance Optimization CSS
|
|
* Improves scrolling performance for video grids
|
|
*/
|
|
|
|
/* Enable smooth scrolling with hardware acceleration */
|
|
* {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Optimize scrolling container */
|
|
.video-grid-container {
|
|
/* Use momentum scrolling on iOS */
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
/* Force GPU layer for scrolling */
|
|
transform: translate3d(0, 0, 0);
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Optimize video cards for rendering */
|
|
.video-card-wrapper {
|
|
/* CSS containment for isolation */
|
|
contain: layout style paint;
|
|
}
|
|
|
|
@supports (content-visibility: auto) {
|
|
.video-card-wrapper {
|
|
/* Content visibility for lazy rendering */
|
|
content-visibility: auto;
|
|
|
|
/* Reduce layout shifts */
|
|
contain-intrinsic-size: auto 400px;
|
|
}
|
|
}
|
|
|
|
/* Reduce repaints on images */
|
|
.video-card-image {
|
|
/* Force GPU rendering */
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
/* Prevent unnecessary repaints */
|
|
will-change: auto;
|
|
|
|
/* Optimize image decoding */
|
|
image-rendering: auto;
|
|
}
|
|
|
|
/* Optimize badges and overlays */
|
|
.video-card-badge {
|
|
/* Force GPU layer */
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
/* No backdrop filter during scroll */
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Disable expensive effects during scroll */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.video-card:not(:hover) .expensive-effect {
|
|
/* Disable blur effects when not hovering */
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
/* Optimize for mobile devices */
|
|
@media (max-width: 768px) {
|
|
/* Reduce visual complexity on mobile */
|
|
.video-card {
|
|
/* Simpler rendering */
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Disable expensive hover effects on mobile */
|
|
.video-card-overlay {
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
/* Grid optimization */
|
|
.optimized-grid {
|
|
/* Grid-specific containment */
|
|
contain: layout style;
|
|
|
|
/* Prevent layout thrashing */
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Passive event listeners hint */
|
|
html {
|
|
/* Hint to browser for passive touch events */
|
|
touch-action: pan-y;
|
|
}
|