Nuxt•5w ago

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 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/ to 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?

3 Replies

kapa.ai•5w ago

Hi @nico. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there are a few potential causes for your WebP styling issues on Cloudflare Pages. Cloudflare CDN Settings One likely cause could be Cloudflare's "Minification and Security Options" that can interfere with Nuxt applications. According to the documentation, certain Cloudflare features can cause rendering issues:

In most cases, Nuxt can work with third-party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems, especially Cloudflare's "Minification and Security Options".

Make sure you have disabled the following options in your Cloudflare dashboard: - Speed > Optimization > Image Optimization > Disable "Mirage" - Speed > Optimization > Content Optimization > Disable "Rocket Loader™" - Scrape Shield > Disable "Email Address Obfuscation" Nuxt Deployment Documentation specifically mentions that these settings can cause "unnecessary re-rendering or hydration errors" that could impact your production application. Image Format Handling Since your issue appeared after migrating from PNG to WebP, it's worth noting that different environments might handle WebP images differently. The Nuxt Image module has specific configurations for WebP format:

export default defineNuxtConfig({
  image: {
    format: ['webp']
  }
})

export default defineNuxtConfig({
  image: {
    format: ['webp']
  }
})

If you're using the Nuxt Image module, you might want to check if there are any format-specific configurations that could be affecting how WebP images are processed. Cloudflare Pages Specific Issues There have been reports of issues with Cloudflare Pages deployments. A recent GitHub issue (#29188) mentioned problems with environment variables when using the nodejs_compat flag, which suggests there might be other Cloudflare Pages-specific behaviors that differ from local or traditional server deployments. Additionally, a Stack Overflow post mentioned issues with the h3-compression dependency (version ^0.3.2) that might conflict with Cloudflare settings:

After some research and tests I did a conclusion that problem may be with h3-compression dependency on ^0.3.2 version (at least after it's removal everything if fine again). Somehow it worked not well on a long distance. It also might conflict with Cloudflare or other server options set with DevOps.

Recommendations: 1. Double-check all Cloudflare optimization settings as mentioned above 2. If you're using Nuxt Image, try explicitly configuring the WebP format handling 3. Check your dependencies, particularly h3-compression if you're using it 4. Consider using the Cloudflare provider in Nuxt Image if applicable:

   export default defineNuxtConfig({
     image: {
       cloudflare: {
         baseURL: '<https://your-domain.com'>
       }
     }
   })

   export default defineNuxtConfig({
     image: {
       cloudflare: {
         baseURL: '<https://your-domain.com'>
       }
     }
   })

If none of these solutions work, you might need to investigate further by comparing the rendered CSS between environments to identify specific styling differences. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@406127466680418316> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

nicoOP•5w ago

* Mirage and Rocket Loader are disabled. And Email Address Obfuscation also. * I am not using the Nuxt Image module. * And I am not using the h3-compression package (neither direct nor listed in my lockfile) * I dont want to use the CDN of Cloudflare

Gaming

Programming

WebP Styling Issues on Cloudflare Pages (Nuxt 3, cloudflare_pages preset)

Did you find this page helpful?