Some images don't load on macOS Safari nor in any iOS browsers on lbry.tv #3993

New issue

Closed

opened 2020-04-14 20:44:17 +02:00 by jeffslofish · 6 comments

jeffslofish commented

2020-04-14 20:44:17 +02:00

(Migrated from github.com)

Bug
The image at https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3 does not load in Safari on macOS on lbry.tv. It also does not load in Safari, Firefox, or Chrome on iOS on lbry.tv.

To Reproduce
Steps to reproduce the behavior:

In Safari on macOS or on any browser in iOS, go to https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3

Expected behavior
The image should load and be displayed

Screenshots

System Configuration

LBRY Daemon version: 0.68.0
LBRY App version:
LBRY Installation ID: 692EAWhtoqDuAfQ6KHMXxFxt8tkhmt7sfprEMHWKjy5hf6PwZcHDV542VHqRnFnTCD
Operating system: macOS Catalina, Version 10.15.3 and iOS version 13.3.1

Additional context
Add any other context about the problem here.

**Bug** The image at https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3 does not load in Safari on macOS on lbry.tv. It also does not load in Safari, Firefox, or Chrome on iOS on lbry.tv. **To Reproduce** Steps to reproduce the behavior: 1. In Safari on macOS or on any browser in iOS, go to https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3 **Expected behavior** The image should load and be displayed **Screenshots** ![Screen Shot 2020-04-14 at 11 32 01 AM](https://user-images.githubusercontent.com/1240484/79260661-79d2fb00-7e43-11ea-86f8-9b6fb2283b1d.png) **System Configuration**   - LBRY Daemon version: 0.68.0 - LBRY App version: - LBRY Installation ID: 692EAWhtoqDuAfQ6KHMXxFxt8tkhmt7sfprEMHWKjy5hf6PwZcHDV542VHqRnFnTCD - Operating system: macOS Catalina, Version 10.15.3 and iOS version 13.3.1 **Additional context** Add any other context about the problem here.

tzarebczan commented

2020-04-16 22:50:12 +02:00

(Migrated from github.com)

Thanks for finding and filing this issue! Any idea what could be happening? Wanna take a shot at fixing it?

jeffslofish commented

2020-04-17 03:39:54 +02:00

(Migrated from github.com)

Sure, I'll take a look at it.

jeffslofish commented

2020-04-17 06:14:11 +02:00

(Migrated from github.com)

I did notice that in the "File Details" section of the page (https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3) it lists the "Content Type" as "image/jpeg" which is incorrect. If you download the file to disk and then check the file using http://www.checkfiletype.com you will see that it is a RIFF file. If you then click "Check File Meta Data" it will say the MIME Type is "image/webp".

So whatever is detecting the content type in the LBRY system, it is doing it incorrectly. I will attempt to look into where this is happening. However, fixing the incorrect display of the content type will not make these images display in the browsers listed above.

The issue is that this particular file is actually a WebP image (in a RIFF container). Currently Safari (and apparently any browser on iOS) doesn't support the WebP image format. This explains why it only displays on Chrome and Firefox. I did notice that in the "File Details" section of the page (https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3) it lists the "Content Type" as "image/jpeg" which is incorrect. If you download the file to disk and then check the file using http://www.checkfiletype.com you will see that it is a RIFF file. If you then click "Check File Meta Data" it will say the MIME Type is "image/webp". So whatever is detecting the content type in the LBRY system, it is doing it incorrectly. I will attempt to look into where this is happening. However, fixing the incorrect display of the content type will not make these images display in the browsers listed above.

jeffslofish commented

2020-04-17 06:43:27 +02:00

(Migrated from github.com)

Update: It looks like the MIME type is simply guessed by the file extension, here: https://github.com/lbryio/lbry-sdk/blob/master/lbry/schema/mime_types.py#L166.

So for the image at https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3, it was probably uploaded with a .jpg or .jpeg file extension and that is why it thinks it has a content type of "image/jpeg".

But the bigger issue is that some browsers simply won't display WebP images at the present time.

Update: It looks like the MIME type is simply guessed by the file extension, here: https://github.com/lbryio/lbry-sdk/blob/master/lbry/schema/mime_types.py#L166. So for the image at https://lbry.tv/@LBRY-Digest:a/Ever-the-optimist-April-Fools-Day:3, it was probably uploaded with a .jpg or .jpeg file extension and that is why it thinks it has a content type of "image/jpeg". But the bigger issue is that some browsers simply won't display WebP images at the present time.

tzarebczan commented

2020-04-17 15:48:53 +02:00

(Migrated from github.com)

Yep, that's how the detection is done currently, there's probably not many better options on that front. Maybe when we know we can't render it, we'd fall back to the unsupported message and allow download on lbry.tv?

jeffslofish commented

2020-04-18 03:51:38 +02:00

(Migrated from github.com)

I opened a pull request for this issue (#4019) with my best guess as to the functionality you would want. Please give feedback. Thanks!