PNG antics

Hey gang, I wonder if the people who wrote your web browser are actually capable of following the PNG spec!

  • Safari 11.1.2: No! (static)
  • Firefox 51.0.1: No! (broken image)
  • MacOS 10.13.6 Preview: No! (solid blue)
  • Chrome 67.0.3396.99: Yes!
  • Opera 49:0: Yes!
  • Xee³ 3.5.3: Yes!
  • Safari, iOS 11.4.1: Yes!
  • Photoshop CS6: Yes!

The image is a ludicrous 111972px wide, but it has to be, because it's the debugging output histogram of a program that strips hours of silence out of a 6+ hour MP3 file, showing where silence was detected and deleted. It is large because the data has a largeness.

Previously, previously, previously, previously, previously, previously.
Tags: , , , , , , ,

33 Responses:

  1. John says:

    Don't be silly. Computers can't handle a number as big as 111,972.

  2. David Glover-Aoki says:

    I'm running Safari 11.1.2 and it seems to given identical results to Chrome - a very wide image in an iframe with a horizontal scroll bar.

    • Ben says:

      Safari 11.1.1, same result. Looks fine.

      • Aristotle says:

        Same here, Safari 11.1.1 and looks just like in Chrome. Maybe the OS X version matters? I’m on Sierra, 10.12.6.

        • Aristotle says:

          Maybe not. Or maybe still. Who knows. Further results:

          Safari “Open Image in New Window” works just fine (but with slightly suboptimal UX: you have to click a very narrow horizontal strip to see anything, since it always shows large pictures scaled to fit the window, so a picture this wide ends up like 2 pixel high). It also saves the file to disk fine and can open it from disk just fine. Everything just works, other than that this happens to be a very big image.

          The same “Open Image in New Tab” exercise produces a blank tab in Chrome. I don’t know if the image is there, but it doesn’t look like it is, and if it is, I cannot get it displayed. If I try to save it and view it in Preview, Preview doesn’t draw anything. All this despite the fact that on this page, inside the iframe, the image works just fine.

          Preview just cannot handle the thing. It obviously renders it: there’s a narrow grey strip across the middle of the window that gets filled in perceptibly just after the window pops up. But it’s zoomed way out to like ~3 pixel high of just white, and no attempt to change the zoom level seems to do anything, so I cannot see anything.

  3. MattyJ says:

    Vivaldi 1.15.1147.55: No! (black image with giant horizontal scrollbar)

    • Peter Hollo says:

      1.15.1147.47 is actually fine (on MacOS 10.13.5)
      Confusion may be that it scrunches the image down to fit the screen, so you have to hover the mouse over the thin line in the middle and click on it. Then you see the full image, complete with waveform.

    • Peter Hollo says:

      Ah, of course it should show in the div in the post itself - and it does for me.

    • Kazriko says:

      I have the same version of Vivaldi, 1.15.1147.55 (Stable channel) (64-bit), and it seems to render correctly here.

  4. ace says:

    FFOX 61.0.1: Wide image w/scrollbar. pink haze is silence deleted, I think, grey haze is noise, presumably, grey varies in intensity.

  5. Carlos says:

    Firefox 62.0b12 (Linux 64 bit): no, broken image with horizontal scrollbar.

    Shame on Firefox!

    C.

  6. NB says:

    Safari 11.1.2 on macOS 10.13.6: Yes!
    Chrome 67 on same: Yes!
    News Explorer 1.8.8 on same: No, when using the RSS feed viewer; Yes, when using its built-in browser to visit the link, which straight uses WebKit. To be fair, it doesn't like displaying images inline in RSS feeds at all in unclear circumstances, so its PNG library may not be at fault here.

    Also my laptop fans are now loudly spinning.

    • jwz says:

      I'm using 11.1.2 10.13.6 and it displays static instead of a waveform.

      • Jon Ault says:

        Looks OK for me in Safari but not Preview.

        MacOS 10.13.6 (17G65) (as reported by System Information)
        Safari Version 11.1.2 (13605.3.8) (as reported by About Safari)

        • Moofie says:

          I see the image fine in Safari but not in Preview.

          Safari 11.1.2 (12605.3.8.1) (from About Safari)
          Preview 9.0 (909.18) (from About Preview)
          MacOS X 10.12.6 (16G1510) (from About This Mac)

          I haven't messed with my system libraries too much, other than some symlinks to support Java 1.8 and Node 8.10.

      • Gabriel Rosenkoetter says:

        Could you clarify what you mean by "static"?

        I'm also using Safari 11.1.2, although on macOS 10.12.6 (I rely on software that wasn't tested on 10.13 for a while, but not I'm just being lazy), and what I see is what others seem to be presuming is "correct".

        Here's a screenshot from within Safari scrolled over a bit (the image also renders fine on its own in a tab, after hitting the magnifying glass on the really narrow strip):

        Is that what you expect to see, or is that what you're seeing as "static"? (That's the same thing that I see in Chrome, so I don't think it's just that's a somewhat chunky waveform.)

        Is it possible that you've got a non-Apple (or developer-only) PNG or web-junk library somewhere in the way?

        (As others have noted, this also doesn't work for me in Preview. It appears to render, zoomed out enough to fit width-wise, and then disappears in chunks.)

        • jwz says:

          That's what it should look like. This is what I'm seeing in Safari 11.1.2 10.13.6:

          In Preview, I just see solid blue for any image that is over somewhere around 40000 wide.

          All of my libs are in /opt/local/ so I'm sure Safari isn't loading those.

          • Gabriel Rosenkoetter says:

            That's super-weird. My results with Preview (same version you mentioned above) don't match what you describe (but are differently unusable, as I described).

            I realized that I wasn't even sure whether Apple-shipped Mach-O binaries even were dynamically-linked, but it seems that they are for me:

            % pwd
            /Applications/Safari.app/Contents/MacOS
            % otool -L Safari
            Safari:
            /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Safari (compatibility version 528.0.0, current version 605.3.8)
            /usr/lib/libSystem.B.dylib (compatibility version 1.0.0, current version 1238.50.2)

            There's also this "SafariForWebKitDevelopment" in the same place, linking to the same stuff, and it also renders the PNG in question correctly for me:

            % otool -L SafariForWebKitDevelopment
            SafariForWebKitDevelopment:
            /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Safari (compatibility version 528.0.0, current version 603.3.8)
            /usr/lib/libSystem.B.dylib (compatibility version 1.0.0, current version 1238.60.2)

            Do you maybe have a different Safari private framework (or, I guess, libSystem.B.dylib) version than the rest of us?

            (I do have XCode installed, but I haven't done much besides need it as a requirement for MacPorts on this system: you certainly do a lot more there.)

  7. Adam says:

    · eog 3.28.3: No! ("BadAlloc (insufficient resources for operation)")
    · feh 2.27: No!
    · ImageMagick display 6.9.10: No! (displays default image)
    · Gimp 2.10.2: Yes!

  8. Christoph says:

    file: 2018-07-29d.png: PNG image data, 111972 x 256, 8-bit colormap, non-interlaced
    geeqie 1.4: displays garbage (so, no)
    gthumb 3.6.1: Memory fault(coredump) nice one...
    ImageMagick 6.9.9.28 display: yes, after some resizing (else uniformly grey)

  9. ian says:

    Microsoft Edge 42.17134.1.0: Yes! :D

  10. Turban Man says:

    Works good on Links2. Why can't Firefox get basic usability stuff like this right?

  11. Firefox 52.9.0 ESR - No.
    Windows 8.1 Image Preview - Yes.
    Paint.Net 4.0.3 - Yes, but with slightly odd behavior (mouse cursor droppings) and other graphical corruptions.
    IrfanView 4.51 x64 - Yes.
    Opera (actual Opera, with the Presto renderer) - Yes.
    Windows Paint - Amazingly, yes.
    Windows Photo Gallery - No, "image is damaged or corrupted".
    Windows 8.1 "Photos" - Yes.

    That's all the programs I had readily to hand.

  12. Line Noise says:

    Chrome 67.0.3396.79 (Linux): No! (black image with giant horizontal scrollbar)
    ImageMagick 6.9.7-4: No! (display: ../../magick/quantum.c:216: DestroyQuantumInfo: Assertion `quantum_info != (QuantumInfo *) NULL' failed. Aborted (core dumped))
    pinta 1.6: No! (System.DivideByZeroException: Attempted to divide by zero.)
    eog 3.28.1: No! (BadAlloc (insufficient resources for operation))
    gimp 2.10.0: Yes! (Finally!)

  13. mdhughes says:

    Mac OS 10.12.6 (and this is not the first time High-as-in-420 has behaved worse than Sierra, so I'll be staying here a while).

    Safari 11.1.1: Yes.
    GraphicConverter 8.8.2: Yes, heavy swap hit.
    Acorn 4.5.8: Yes, no noticeable swap hit.
    Preview: No, blue bar.
    Chrome 68.0.3440.75: No.

  14. VRic says:

    OS X 10.8.5, iCab 5.8.3: Yes!
    OS X 10.8.5, Safari 6.2.8: Yes!
    OS X 10.8.5, Preview: Yes!
    Meh, 2018 is overrated.

  15. phuzz says:

    Testing with Windows 10 (1830):
    Preview: Yes (well, it's hard to tell with an approx 5px high preview, but it looks like it works)
    Paint: Yes
    Edge: Yes
    Internet Explorer 11.165: Yes(!)
    Libre Office Draw (6.0.2.1): Yes, but slow

    • Tim says:

      Windows Photo Viewer (on Win server 2008) also seems to work; defaults to view from 10,000 ft but can be zoomed.

  16. Ash says:

    Opera 54.0.2952.64 shows the image with a horizontal scroll bar.

Leave a Reply

Your email address will not be published. But if you provide a fake email address, I will likely assume that you are a troll, and not publish your comment.

You may use these HTML tags and attributes: <a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <s> <strike> <strong> <img src="" width="" height="" style=""> <iframe src="" class=""> <video src="" class="" controls="" loop="" muted="" autoplay="" playsinline=""> <div class=""> <blink> <tt> <u>, or *italics*.

  • Previously