Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Webp image format is returned for Safari 13.1.1 #104

Open
2 tasks
summera opened this issue Aug 14, 2022 · 0 comments
Open
2 tasks

[Bug]: Webp image format is returned for Safari 13.1.1 #104

summera opened this issue Aug 14, 2022 · 0 comments
Labels
priority: low type: bug code to address defects in shipped code

Comments

@summera
Copy link

summera commented Aug 14, 2022

Summary

I have a site using Next v12.2.3. I haven't customized any of the configuration. I deployed it to Netlify and I'm using some next/image tags on some pages. Images were loading fine in Chrome and Firefox. When I opened the site on Safari 13.1.1 I noticed that the images were broken. Safari 12.2.3 doesn't support webp but it seems that the site was returning images in webp format anyway.

The image request Accept header for Safari 13.1.1 was image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5. The response content-type header was image/webp.

I couldn't figure out how to fix it and ended up setting NEXT_DISABLE_EDGE_IMAGES to true so that it's forced to return the original format for all browsers, png.

I know that the ipx function is involved here, but I'm not sure why it's choosing to return webp in this case or where the content-type response header is being set.

Any idea why this might be happening?

Steps to reproduce

  1. Create a Next site with v12.2.3
  2. Use a png image on a page using the next/image component
  3. Deploy the site to Netlify
  4. Load the page in Safari 12.2.3

A link to a reproduction repository

No response

Plugin version

4.14.2

More information about your build

  • I am building using the CLI
  • I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.toml`
# Paste content of your `netlify.toml` file here

Your public/_redirects file

`_redirects`
# Paste content of your `_redirects` file here

Your next.config.js file

`next.config.js`
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    newNextLinkBehavior: true,
    images: {
      allowFutureImage: true,
    },
  },
}

module.exports = nextConfig

Builds logs (or link to your logs)

Build logs
# Paste logs here

Function logs

Function logs
# Paste logs here

.next JSON files

generated .next JSON files
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.
@summera summera added the type: bug code to address defects in shipped code label Aug 14, 2022
@ascorbic ascorbic transferred this issue from netlify/next-runtime Dec 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority: low type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

1 participant