Issue with WebP Image Styling on Cloudflare Pages Deployment

Hi everyone, I'm running into a strange issue when deploying my Nuxt 3 app on Cloudflare Pages. Problem: - Locally, everything looks fine (pnpm run dev and pnpm run preview work as expected). - On a self-hosted Debian server with Nginx, the deployment also looks fine. - On Cloudflare Pages, the WebP image loads (correctly as I saw through network inspection) but gets styled weirdly for all users---it's cut off and looks different from local/Nginx builds. (Screenshots added) What I've Tried: - Moved images from dynamic Nuxt assets/ directory to static public/ → No change. - Checked if Cloudflare modifies images (Polish, Image Optimization) → Not enabled (Free Plan). - Purged Cloudflare Cache & Tested with Cache-Control Headers → No change. Question: Is Cloudflare Pages applying any kind of image transformation, aspect ratio enforcement, or hidden CSS modifications that might cause styling differences in WebP images? If not, what else could cause the difference between a local build, a normal webserver deployment and the Cloudflare Pages deployment?
No description
No description
1 Reply
nico
nicoOP2d ago
was related to the nuxt tailwindcss module in combination with cloudflare, fixed through the newest tailwind nuxt module version

Did you find this page helpful?