khalyomede / khalyomede/gulp-sharp-responsive

Problem with AVIF file generation not displaying in Safari using gulp-sharp-responsive

Open
#18 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
18
Forks
6
PR merge metrics
No merged PRs in 30d

Description

I'm currently using the gulp-sharp-responsive library to generate AVIF files. However, these files are not visible in Safari (MacOSX version 12.7, Safari version 17.0). It's important to note that when I generate the same AVIF files using Squoosh, they are visible in Safari. This suggests that the issue might not lie with the AVIF format itself but with how gulp-sharp-responsive is generating these files.

### Expected Behavior:
I expected the AVIF files generated by gulp-sharp-responsive to be visible in all browsers, including Safari 17.0 on MacOSX 12.7, similar to the files generated by Squoosh.

### Steps to Reproduce:
Use gulp-sharp-responsive to generate AVIF files.
Attempt to view these AVIF files in Safari 17.0 on MacOSX 12.7.
Observe that the files are not visible in Safari.
Observed Behavior:
The AVIF files generated by gulp-sharp-responsive are not visible in Safari 17.0 on MacOSX 12.7, despite being valid files.

### Environment:
Operating System: MacOSX 12.7
Node.js Version: [Your Node.js version]
Browser and Version: Safari 17.0
Additional Information:
I've verified the validity of the generated files and confirmed their functionality in other browsers and when generated by Squoosh. This indicates that the problem might be related to how gulp-sharp-responsive is generating AVIF files specifically for Safari 17.0 on MacOSX 12.7.

I would greatly appreciate your help in resolving this issue, as Safari compatibility is crucial in my workflow. Thank you in advance!

### Suggested Steps to Resolve:
Investigate if there are known issues with AVIF generation in gulp-sharp-responsive specifically for Safari 17.0 on MacOSX 12.7.
Perform specific tests in this environment to identify and resolve the compatibility issue.
Thank you for your attention!

Contributor guide

Open the contributing guide

Research direction

Start by reproducing AVIF generation with gulp-sharp-responsive and viewing the result in Safari 17.0 on macOS 12.7. Compare the generated file with an equivalent Squoosh output and investigate the generation path; done means the generated AVIF displays correctly in Safari as well as other browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.