I have recently lost some nerve over finding the cause of severely falling FPS in my application. The problem is that after using the app for a while, its performance drops very sharply, down to about 10FPS. Looking for the cause, I found that removing the drop-shadow-md class from the @apply directive solved the problem.
@layer components {
.standard-card {
@apply rounded-md drop-shadow-md bg-surface-content-light dark:bg-surface-content-dark
}
/* other classes */
}
In other threads I managed to find that everything related to the shadow causes a heavy load on the CPU. When dynamically rendering components it causes even more load. In my case, I render most of the components that use the standard-card class using 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 solutions to this problem?
Stack:
Tailwind configuration
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {...}
}
Probably related:
It seems like you have a background color on the element so with the information available, it seems like there isn't any transparent layering going on. This means you could consider using box-shadow instead of filter: drop-shadow() by swapping out drop-shadow-* for shadow-* which should be more performant:
tailwind.config = {
theme: {
extend: {
backgroundColor: {
'surface-content-light': 'red',
'surface-content-dark': 'green',
},
},
},
};<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer components {
.standard-card {
@apply rounded-md shadow-md bg-surface-content-light dark:bg-surface-content-dark
}
}
</style>
<div class="standard-card flex flex-col gap-2"> ...content... </div>