[Bug]: Lazyload images blurs on iOS (mobile), MacOS

[RoversX]

使用的 Butterfly 版本？ | What version of Butterfly are you use?

4.12

是否修改过主题文件？ || Has the theme files been modified?

是 (Yes)

使用的瀏覽器？ || What browse are you using?

Safari

使用的系統？ || What operating system are you using?

iOS

依賴插件 | Package dependencies Information

├── @renbaoshuo/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

問題描述 | Describe the bug

# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: True
  field: site # site/post
  placeholder:
  blur: false

When using lazyload, on Apple devices with a screen width geared towards mobile and during the first load, images appear blurry. However, after waiting for a while, the images become clear. If the image is enlarged using medium-zoom or fancybox while it's still blurry, the image turns clear, when close it, turn blurry again. This issue only occurs in Safari and has been tested without issues on Android Chrome (Chrome 120.0.6099.210), macOS Chrome (Version 120.0.6099.216 (Official Build) (arm64)), and Windows Edge. Additionally, if the phone is rotated to landscape mode and then back to portrait mode, the images become clear. This indicates that the issue is related to the width of the images. When lazy loading is disabled, the issue no longer occurs. Let's hope this gets fixed. Thank you.

出現問題網站 | Website

https://blog.closex.org/posts/8d02fdaf/