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.

Sign up for GitHub

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

Jump to bottom

Chrome 85 downloads avif files #2

Open
anjanesh opened this issue Sep 24, 2020 · 2 comments
Open

Chrome 85 downloads avif files #2

anjanesh opened this issue Sep 24, 2020 · 2 comments

Comments

@anjanesh
Copy link

I'm on Chrome 85 - why doesn't any of the avif images render in the browser ? All are getting downloaded to my downloads folder.
@baumanj
Copy link

baumanj commented Oct 24, 2020

Presumably this is because of GitHub not recognizing AVIF as an image type yet, so the detail view doesn't contain an img tag, instead it gives a "view raw" link. And because that "view raw" link serves the content as application/octet-stream rather than image/avif, browsers respond by downloading the file.

@ve3
Copy link

ve3 commented Apr 5, 2024 •
edited

Currently tested using Firefox 104.0.2, MS Edge 123.0.2420, Chrome 123.0.6312 but these files are not be able to display in these web browsers.

Firefox

Files that is failed to loaded in Firefox.

$firefox = array(
    'img-src/kimono.crop.avif',
    'img-src/kimono.mirror-horizontal.avif',
    'img-src/kimono.mirror-vertical.avif',
    'img-src/kimono.mirror-vertical.rotate270.avif',
    'img-src/kimono.mirror-vertical.rotate270.crop.avif',
    'img-src/kimono.rotate270.avif',
    'img-src/kimono.rotate90.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

Chrome

Files that is failed to loaded in Chrome and MS Edge (they failed the same files).

$chrome = array(
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

Files that are common failed on these 3 browsers.

$commonFailed = array(
  0 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
  1 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
  2 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
  3 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
  4 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
  5 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
  6 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
  7 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
  8 => 'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
  9 => 'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
  10 => 'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
  11 => 'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
  12 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
  13 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
  14 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
  15 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
  16 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
  17 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
  18 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
  19 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
  20 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
  21 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
  22 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
  23 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
  24 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
  25 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
  26 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
  27 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
  28 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
  29 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
  30 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
  31 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
  32 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
  33 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
  34 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
  35 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
  36 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
  37 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
  38 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
  39 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
  40 => 'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
  41 => 'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
  42 => 'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
  43 => 'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
  44 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
  45 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
  46 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
  47 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
  48 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
  49 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
  50 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
  51 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
  52 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
  53 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
  54 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
  55 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
  56 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
  57 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
  58 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
  59 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
  60 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
  61 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
  62 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
  63 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

And for animated files.

Firefox

$firefox = array(
    'img-src/animated/alpha_video.avif',
    'img-src/animated/star-10bpc-with-alpha.avifs',
    'img-src/animated/star-12bpc-with-alpha.avifs',
    'img-src/animated/star-8bpc-with-alpha.avifs',
);

Chrome (&Edge)

$chrome = array(
    'img-src/animated/alpha_video.avif',
    'img-src/animated/star-10bpc-with-alpha.avifs',
    'img-src/animated/star-12bpc-with-alpha.avifs',
    'img-src/animated/star-8bpc-with-alpha.avifs',
);

@ve3 ve3 mentioned this issue Apr 5, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@anjanesh @ve3 @baumanj