LQIP blur effect fails on homepage

[hyngng]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Built from jekyll-theme-chirpy

Describe the bug

The Chirpy theme includes an aesthetic feature where, upon loading a high-resolution image, it replaces its LQIP with a smooth 0.35-second blur effect. However, I've observed that this blur effect, while working correctly on post pages post.html, fails to activate on the preview posts on the homepage home.html as shown in the gif above.

Specifically, on the homepage, while the LQIP for featured images is displayed, the transition to the full-resolution image is abrupt and "hard," lacking the intended blur effect. I first discovered this issue on my blog, but I confirmed that the same problem occurs on the Chirpy demo page, so it is likely a bug. (You can see what I mean by refreshing the homepage.)

Steps To Reproduce

1. Add the lqip property to a post's front matter. (In my case, I used a base64 string.)
2. Notice that when the full-resolution images finish loading, they replace the LQIPs abruptly without the smooth blur transition.

Expected Behavior

When a high-resolution featured image on the homepage loads (after its LQIP has been displayed), it should exhibit a smooth 0.35-second blur effect during the transition like the one in the gif above.

Environment

• Ruby: 3.3.0
• Jekyll: 4.4.1
• Chirpy: 7.3.1

Anything else?

Actually, the issue can be resolved with a one-line fix in _includes/refactor-content.html. Changing {% assign _class = _class | append: ' blur' %} to {% assign _wrapper_class = _wrapper_class | append: ' blur' %} corrects the behavior.

While I can't be certain of the cause, this looks like a simple oversight from when the logic was updated to apply the blur class to the parent wrapper instead of the <img> tag itself.

You can see this fix working on my page

[lotusk08]

Thanks!