Simple Sites: Animated Gif Featured Images display blurry on some classic themes

[daria2303]

Quick summary

GIFs uploaded as featured images in Portfolios display blurry after a moment, on mobile.

Steps to reproduce

1. Install Sketch theme
2. Upload a GIF as a Portfolio page featured image.
3. Set a page to use Portfolio template.
4. Open the page on mobile

What you expected to happen

GIFs display sharp and don't reload.

What actually happened

GIF displays ok at first and after a very short moment, it gets blurry.

Context

5682460-zd-woothemes

Similar old discussion: p1540917339529100-slack-C03TY6J1A

Platform (Simple, Atomic, or both?)

Simple

Theme-specific issue?

Yes, I did not reproduce on another portfolio theme.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5682460-zen

[cuemarie]

📌 SCRUBBING : RESULT

• Tested on Simple: Replicated
• Tested on AT: Could Not Replicate
• Tested on Self-hosted: Could Not Replicate
• Replicable on Core? No

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm able to replicate this issue on Simple Sites using at least 2 Classic Themes:
  • Sketch
  • Rebalance

Simple Site, Sketch theme, mobile

https://user-images.githubusercontent.com/27249804/201237567-f57e301e-03cd-4059-b4cb-5fad03f808be.mov

Simple Site, Sketch theme, Desktop Firefox

https://user-images.githubusercontent.com/27249804/201237600-9a365e87-f98d-4e0c-89c0-7d78d453d593.mp4

Simple Site, Rebalance theme, desktop this test shows low-quality GIF featured images on a blog posts page for both portfolio projects and posts, and then a higher quality display of the featured image on the single pages for the portfolio and post

https://user-images.githubusercontent.com/27249804/201237794-53c9bacb-db22-46fe-8f24-fd34750f39e9.mp4

---

Examples of AT & FSE themes not reproducing issue

• AT site using Sketch did not replicate the issue (on mobile or desktop):

https://user-images.githubusercontent.com/27249804/201238925-024c231a-6a47-4778-ba91-62a6f735780c.MP4

• Simple site using the FSE theme Masu and displaying Portfolio projects did not replicate the issue: =

https://user-images.githubusercontent.com/27249804/201239559-da1336a6-9ae4-4d44-a600-fbf60a0d06b4.mov

📌 ACTIONS

• Marked as Triaged for Quality Squad review

📌 Message to Quality Squad

• I don't think this is limited to just Sketch, but not sure exactly where the pattern is, so just made a vague update to the title for now.