WebP Styling Issues on Cloudflare Pages (Nuxt 3, cloudflare_pages preset)
Hi everyone,
I'm running into a strange issue when deploying my Nuxt 3 app on Cloudflare Pages using the
- Locally, everything looks fine (
- On a self-hosted Debian server with Nginx, the deployment also looks fine.
- On Cloudflare Pages, the WebP image loads correctly (confirmed via network inspection), but it gets styled weirdly---it's cut off and visually different from local/Nginx builds. (Screenshots attached)
- Moved images from
- Checked if Cloudflare modifies images (Polish, Image Optimization, Auto WebP) → Not enabled (Free Plan).
- Purged Cloudflare Cache & Used Cache-Control Headers → No change.
- Compared Tailwind classes (object-cover, aspect ratio, etc.) → Looks correct in DevTools.
- I have confirmed, that the rendered DOM looks the same (completely the same TailwindCSS classes, absolutely no difference since in moved the assets to public
Since I'm using the
Are there any known differences in how Nuxt processes styles when targeting Cloudflare Pages?
If not, what else could cause styling inconsistencies specifically in a Cloudflare Pages deployment compared to local/Nginx builds?
I'm running into a strange issue when deploying my Nuxt 3 app on Cloudflare Pages using the
cloudflare_pages preset in nuxt.config.ts. It appeared only after migrating my png images to webp.Problem:
- Locally, everything looks fine (
pnpm run dev and pnpm run preview).- On a self-hosted Debian server with Nginx, the deployment also looks fine.
- On Cloudflare Pages, the WebP image loads correctly (confirmed via network inspection), but it gets styled weirdly---it's cut off and visually different from local/Nginx builds. (Screenshots attached)
What I've Tried:
- Moved images from
assets/public/ → No change.- Checked if Cloudflare modifies images (Polish, Image Optimization, Auto WebP) → Not enabled (Free Plan).
- Purged Cloudflare Cache & Used Cache-Control Headers → No change.
- Compared Tailwind classes (object-cover, aspect ratio, etc.) → Looks correct in DevTools.
- I have confirmed, that the rendered DOM looks the same (completely the same TailwindCSS classes, absolutely no difference since in moved the assets to public
Question:
Since I'm using the
cloudflare_pages preset in nuxt.config.ts, could it be handling CSS/styling differently than other environments?\Are there any known differences in how Nuxt processes styles when targeting Cloudflare Pages?
If not, what else could cause styling inconsistencies specifically in a Cloudflare Pages deployment compared to local/Nginx builds?
