Make WordPress Core

Opened 2 years ago

Closed 2 months ago

Last modified 2 months ago

#55561 closed defect (bug) (duplicate)

Twenty Seventeen: Blurry header image on mobile

Reported by: robertghetau's profile robertghetau Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.9.3
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

Steps to reproduce

  • Add a custom header image via the Customizer on Twenty Seventeen
  • View the site on desktop
  • View the site on mobile/use responsive design mode to see image on a smaller screen

Image used: https://philnicktestahome.files.wordpress.com/2019/09/cropped-pexels-photo-2745258.jpeg

This appears to be caused by the Responsive images settings inside the theme.

Attachments (1)

55561.diff (919 bytes) - added by sabernhardt 3 months ago.
increases size recommendation to 200vw for screens up to 767px wide

Download all attachments as: .zip

Change History (8)

#1 @sabernhardt
2 years ago

  • Component changed from General to Bundled Theme

#2 @sabernhardt
4 months ago

  • Keywords needs-patch added

Original report:
https://github.com/Automattic/themes/issues/5844

The image might be a little stretched, but it seems to get blurry below the 48em breakpoint (possibly related to the 768w and smaller images in the srcset.)

#3 @sabernhardt
4 months ago

The srcset fetches smaller images based on the viewport width, but the styles allow it to stretch beyond the container width (up to 1000%).

@sabernhardt
3 months ago

increases size recommendation to 200vw for screens up to 767px wide

#4 @sabernhardt
3 months ago

  • Keywords has-patch added; needs-patch removed

I chose 200vw for the smaller screens so it would be less than the full size. Increasing further to 2000px might avoid blurriness at any height, though the image probably would be larger than necessary.

The image fills a container that is 75vh tall, which would make the image width 125vh at a ratio of 5:3 (but vh does not seem to work in the sizes attribute).

#5 @sabernhardt
3 months ago

  • Milestone changed from Awaiting Review to 6.6

#6 @shailu25
2 months ago

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/55561/55561.diff

Environment:

WordPress - 6.5.2
OS - Windows
Browser - Chrome
Theme: Twenty Seventeen
PHP - 8.1.23
Active Plugin - None

Actual Results:

  • Issue Resolved With Patch ✅

Screenshots:

Before Patch: https://prnt.sc/9Tyhwfv-38_P
After Patch: https://prnt.sc/cEt-_Vn1ec0Z

#7 @sabernhardt
2 months ago

  • Milestone 6.6 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

I missed that this issue had a much older ticket: #39253

Please continue the discussion there.

Last edited 2 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.