Images do not display on macOS Safari with 100% zooming level

[HaoranLiao]

Acknowledge the following

• I carefully read and followed the Getting Started guide.
• I read through FAQ and searched through the past issues, none of which addressed my issue.
• The issue I am raising is a potential bug in al-folio and not just a usage question.
  [For usage questions, please post in the Discussions instead of raising an issue.]

Describe the bug
My profile and project images do not display on macOS Safari (Version 13.1.3). The display was fine on Chrome and Firefox. And it was also fine on iOS Safari.

Expected behavior
Profile images and project card images displayed on the webpage

Screenshots
A screenshot of the profile image not displayed on macOS Safari:

A screenshot of the project card image not displayed on macOS Safari:

System (please complete the following information):

• OS: macOS
• Browser (and its version) Safari 13.1.3
• Jekyll version: 4.2.1
• Ruby version: 3.0.3p157 (2021-11-24 revision 3fb7d2cadc) [x86_64-darwin19]

Additional context

My profile and project images do not display on macOS Safari (Version 13.1.3). The display was fine on Chrome and Firefox. And it was also fine on iOS Safari. Whenever I use the macOS Safari to open my page, say the about page, I get this error:

[2022-01-23 11:00:17] ERROR `/assets/img/my_pic-480.webp' not found.
[2022-01-23 11:00:18] ERROR `/assets/img/my_pic-1400.webp' not found.
[2022-01-23 11:00:23] ERROR `/assets/img/my_pic-480.webp' not found.

I tried to use different user agents in macOS Safari to open the webpage which is why there are different sized my_pic requested. All of the 480, 800, and 1400 sized images (.webp) cannot be found (but the .jpeg img is definitely in the /img folder). I tried opening up other people's al-folio webpage on macOS Safari and their images all display properly. Any clue on solving this?

[vanshaj18]

I am also facing the same issue on linux-ubuntu 20.04 LTS. Raised the issue in discussion #539

[HaoranLiao]

Just to add to my problem: I have imagemagick correctly installed and the bundle exec jekyll serve seems to work fine:
For example:

Imagemagick: Adding static file /Users/haoranliao/Documents/GitHub/haoranliao.github.io/_site/assets/img/my_pic-480.webp
Imagemagick: Adding static file /Users/haoranliao/Documents/GitHub/haoranliao.github.io/_site/assets/img/my_pic-800.webp
Imagemagick: Adding static file /Users/haoranliao/Documents/GitHub/haoranliao.github.io/_site/assets/img/my_pic-1400.webp

But there are a few warnings (I am not sure if they really matter):

Jekyll Diagrams: Command Not Found: mmdc
           Warning: Empty `slug` generated for ''.
           Warning: Empty `slug` generated for ''.
           Warning: Empty `slug` generated for ''.

And things like

Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/xxxxxxx/Documents/GitHub/xxxxxxx.github.io/_site/assets/img/SOME_PHOTO-480.webp
                     - /Users/xxxxxxxx/Documents/GitHub/xxxxxxxxx.github.io/_site/assets/img/SOME_PHOTO-480.webp
                     - /Users/xxxxxxxx/Documents/GitHub/xxxxxxxxxx.github.io/_site/assets/img/SOME_PHOTO-480.webp

The SOME_PHOTOs are not the ones that do not display though. So the conflict is probably not related to my issue. Just to let you know.

[alshedivat]

@HaoranLiao, @vanshaj18, are you still experiencing the issue? I'm not able to reproduce on my end. maybe either of you could link me to your repos that have this rendering issue?

regarding Jekyll Diagrams: Command Not Found: mmdc, this only pertains to the example blog post with diagrams, which requires installing mermaid.cli that generates the diagram. feel free to ignore (and just remove the example blog post) if you don't need that support or install mermaid using (npm install -g mermaid.cli).

[HaoranLiao]

@alshedivat Hi, thanks for trying to reproduce this. The problem still exists. This is my repo.
The image not displaying issue only occurs on mac Safari (I tried two MacBooks and both of them have this issue when using Safari). The image display works fine on Chrome, Firefox, Microsoft Edge, and iOS Safari.

[alshedivat]

@HaoranLiao, this is very odd. I've just cloned your repo, built it locally, opened in Safari and everything seems to work:

I do see a bunch of warnings in the build log:

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-480.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-480.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-480.webp

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-800.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-800.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-800.webp

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-1400.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-1400.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/mspacman-1400.webp

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-480.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-480.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-480.webp

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-800.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-800.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-800.webp

          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-1400.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-1400.webp
                     - /Users/maruan/Documents/dev/al-folio/haoranliao.github.io/_site/assets/img/transmon-1400.webp

don't think any of these warnings are critical, likely due to the fact that you are using the same thumbnail image for multiple projects, so it gets overridden multiple times during build.

[HaoranLiao]

@alshedivat hmm, thanks for trying it. This is really odd. The Safaris on my two MacBooks (no extension installed, cache cleared) both have trouble displaying the images on my locally built site and my online published site. I might try with another Mac when I have the chance. I don't have anything to add to this issue. It might be just a Safari problem on my Macs.

[mabdelhack]

This behavior happened with me on Windows when the page was zoomed in. In my case, it started with 150% zooming level to break.

[HaoranLiao]

@alshedivat This bug is genuine. What @mabdelhack described is also actually what happened to me with my macOS Safaris -- I just tried to zoom out on my Safari and found that everything worked fine. The default zooming level (100%) of my Safari gave the picture loading error on my website; if I just zoom out to 85% on Safari, the pictures all display fine.

[alshedivat]

ok, I was able to reproduce this issue by zooming in and out the projects page. looks like an issue with responsive images. will look into this.

[SpencerPao]

Windows for me broke at >= 100% zoom.

[tornikeo]

I suspect this was caused by pull #498 . Can anyone also check it out?

[mabdelhack]

Just another observation, this bug only occurs on the development server but not on the actual site.

[HaoranLiao]

Just another observation, this bug only occurs on the development server but not on the actual site.

The bug occurs on both the actual site and the development server for me.

[tornikeo]

Found a temp fix. in _includes/figure.html, comment out lines 6-8. Like this:

Until we figure out what's the deal with the imagemagick, this should do.

[rohandebsarkar]

Found a stack overflow discussion related to this: https://stackoverflow.com/questions/45671200/safari-not-requesting-srcset-images-on-resize

It seems that Safari does not support this feature of requesting (or downloading) a new image due to viewport size changes.

This article explains it a bit: https://cloudfour.com/thinks/state-of-responsive-images-2017/#mixed-news-inconsistent-implementations

[Tanglumy]

I came out with the same error, and I tested it and traced the log ERROR /assets/img/me-1400.webp' not found`, which means that there is an error when the pics take the Responsive layout. BTW, All my pics have the same errors.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[4cti0nfi9ure]

I am using ubuntu 22.04 and had the same issue. Imagemagick was not generating the responsive images. Installing imagemagick using sudo apt install imagemagick fixed the issue.

[shubhams]

I can reproduce the same issue on a mobile device (iOS 15.5) and mobile layouts on a mac desktop. @tornikeo's suggestion about commenting out lines 6-8 _includes/figure.html worked for me.

[rohandebsarkar]

With PR #726, we now have an option in _config.yml to disable responsive images.

Just make the following changes in _config.yml:

enable_responsive_images: false

and also turn off jekyll-imagemagick by making:

imagemagick: 
  enabled: false

al-folio/_config.yml

Lines 240 to 243 in bcd43a1

	enable_responsive_images: true # enables responsive images for your site (recomended, see https://github.com/alshedivat/al-folio/issues/537)
	imagemagick:
	enabled: true # make it 'false' if not using responsive images

[shubhams]

I recently pulled the latest changes from #726. It seemed to be working well on local but it broke the profile image for me in production. Going back to #537 (comment) fixed it.

[rohandebsarkar]

@shubhams,

#537 (comment) and #726 should do the same thing.

Did you change enable_responsive_images to false in _config.yml?

[rohandebsarkar]

To my best knowledge, this issue should completely be fixed by PR #748.

I have used jQuery to delete the responsive image <source> elements, in case the responsive image block encounters any error, by adding a onerror attribute to the <img> element.

It is now no further required to change anything in the _config.yml or _includes/figure.html, this should work out of the box.

Would appreciate if anyone would check and confirm whether this is working or not.

[ereverman]

I am still having a similar issue building my page. The images that are part of the forked repo are fine but my image does not consistently load.

[sawhney-medha]

I am still facing the same issue on Safari, both on Macbook and Phone. The images look blurred at 100% resolution

[michaelwestjr]

I ran into the same issue as well. The image is not loading at all on neither Safari nor Chrome on (I tested this both on MacOS, iPhone and Windows).

[nuria-bosch]

Same issue here - my profile photo disappears when my tab (both Chrome and Safari) is full screen.