Make WordPress Core

Opened 23 months ago

Last modified 3 weeks ago

#55561 new defect (bug)

Twenty Seventeen: Blurry header image on mobile

Reported by: robertghetau's profile robertghetau Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.9.3
Component: Bundled Theme Keywords: needs-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.

Change History (3)

#1 @sabernhardt
23 months ago

  • Component changed from General to Bundled Theme

#2 @sabernhardt
3 weeks 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
3 weeks 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%).

Note: See TracTickets for help on using tickets.