Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminating the drop-shadow-md class from the @apply directive resolved the issue.
@layer components {
.standard-card {
@apply rounded-md drop-shadow-md bg-surface-content-light dark:bg-surface-content-dark
}
/* other classes */
}
In various discussions, it came to light that any elements with shadows exert a heavy load on the CPU, especially when dynamically rendering components. In my scenario, most components utilizing the standard-card class are rendered through a v-for loop.
<div v-for="chart in ltCharts" :key="chart" class="standard-card flex flex-col gap-2"> ...content... </div>
Are there any viable solutions to address this predicament?
Tech Stack:
- Vue - 3.2.45
- PrimeVue - 3.29.2
- PrimeIcons - 6.0.1
- Vite - 4.3.9
- TailwindCSS - 3.3.2
Tailwind Configuration
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {...}
}
Potentially relevant resources:
CSS - drop-shadow issue CSS Text-shadow performance issues.