Sample blog post hero not rendering on Safari

[uloco]

The sample blog post is not rendering correctly on my setup. The hero image seems to be missing.

I did a clean repo clone (as recommended), and ran codedoc serve. If I switch from Home to Sample Blog Post on the side bar, the page does not show any hero image and the title is far at the bottom. See here:

Oddly the page renders fine if I do a page refresh. (at the end of the gif)

I don't have any similar issues on Google Chrome.

macOS Version 10.15.7 (19H2) Safari Version 14.0 (15610.1.28.1.9, 15610) without any extensions enabled Resolution of Safari window does not matter.

[TysonMN]

Is anything printed to the browser's console? Is anything printed to the terminal where you executed codedoc serve?

[uloco]

Yes, should have look earlier 😅

In chrome I also get an error but it is showing the image and everything properly. There is a different error on chrome though (403)

EDIT: Also the page loads correctly, if I type in the address and navigate directly to the sample blog post. When switching between screens, it is broken.

[uloco]

Oh, I think it is the git suffix again, which is included here in the url -.- If I delete this from the url, the response is correct. Editing the codedoc config repo by removing the .git solved this error.

But the blog post is still not rendering correctly

[TysonMN]

Great job fixing your problem. FWIW, I had already typed a partial response below, so I will share it.

EDIT: Also the page loads correctly, if I type in the address and navigate directly to the sample blog post. When switching between screens, it is broken.

CODEDOC uses the "single-page style" of modern website development. When navigating an internal link, it simulates a full page via (rather) minimal amount of changes. Sometimes that minimal reload is not done perfectly. It is great that you thought to try directly loading that whole page vs navigating to that page from an internal link.

[uloco]

The issue is not solved, sorry. I just solved the error log, but the issue persists

[TysonMN]

Ok, sorry for misunderstanding. Can you re-answer these questions then after removing .git from your URLs?

Is anything printed to the browser's console? Is anything printed to the terminal where you executed codedoc serve?

[uloco]

Nothing is printed to the console after fixing the git repo in .codedoc/config.ts

[uloco]

The console output in the terminal is this

[loreanvictor]

@uloco can you reproduce this on other browsers? if not, could you see if clicking around / zooming in/out / generally interacting with the page causes the image to re-appear (as if it was loaded correctly)?

[uloco]

I can try tomorrow with different environments. But what I also found out is, that the issue also happens on already published production pages like for example on your blog @loreanvictor. So it is not a serving issue.

[uloco]

Ok, I cannot reproduce this on my other Macbook.

Safari Version 13.1.2 (15609.3.5.1.3) macOS Version 10.15.6 (19G2021)

Maybe Safari added some new "Security" features here, that break things?

[loreanvictor]

Hmmm, I'll see if I can find a changelog or something.

[timweiss]

I can reproduce the same issue on my machine on eugene.coding.blog with Safari Version 14.0 (15610.1.28.1.9, 15610) macOS Version 10.15.6 (19G2531)

but it does not happen on tims.coding.blog, a difference I was able to spot are that my Safari chose to display the base64 representation of an empty image (Safari says 1x1 px, but the real size on reload when the image is rendered correctly):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="image-0-0-12" data-src="https://images.unsplash.com/photo-1574334292321-4844f63aefef?w=1993&amp;h=600&amp;fit=crop" data-hero="">

But I'm not sure if this may be intended behavior here, my blog uses a fairly old version of codedoc.

[loreanvictor]

I couldn't find anything in particular on recent changes of Safari. Version 14 seems to have had memory issues on older macOS versions (which is not the case here).

In any case, this seems to be isolated to Safari and a particular version, which makes it highly likely that this is caused by something gone wrong with the new update. I will mark this issue as pending on external library for now, and will keep an eye on the situation.

[uloco]

This issue is also present on my iPhone, iOS Version 14.1. Tried on uloco.coding.blog and eugene.coding.blog. Make sure to navigate via side menu.