WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 11 months ago

Last modified 11 months ago

#39073 closed defect (bug) (fixed)

Twenty Seventeen header image is compressed

Reported by: dlh Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: Cc:

Description

This should be replicable by visiting a post on a fresh install running Twenty Seventeen. See attached screenshot.

Attachments (5)

Screen Shot 2016-12-04 at 3.34.50 PM.png (737.1 KB) - added by dlh 11 months ago.
39073.diff (623 bytes) - added by peterwilsoncc 11 months ago.
39073.2.patch (1.7 KB) - added by davidakennedy 11 months ago.
Fixes specificity problem with @supports statement.
Sample_Page_–_WordPress_Commit.jpg (396.4 KB) - added by peterwilsoncc 11 months ago.
39073.3.patch (722 bytes) - added by stormrockwell 11 months ago.
This fixes inheritance issues with transform on header images that aren't the home/front page

Download all attachments as: .zip

Change History (17)

#1 @nonproftechie
11 months ago

Instead of putting an <img> inside a <div>, what if we made the image a background to the <div> with user-defined options available for the alignment (with default center center)? Or is there a specific reason we are doing the <img> inside the <div> (such as being able to replace <img> with <video> when it's a video background)?

Last edited 11 months ago by nonproftechie (previous) (diff)

#2 @peterwilsoncc
11 months ago

  • Keywords has-patch added

Removing the positioning and transform negation in the feature query looks to fix this.

#3 @davidakennedy
11 months ago

  • Milestone changed from Awaiting Review to 4.7

#4 @sanchothefat
11 months ago

@dlh is this in a specific browser? Any other info to add?

#5 @dlh
11 months ago

@sanchothefat This was on Chrome 54.0.2840.98, macOS 10.12.1. I'm sorry, but I haven't been following Twenty Seventeen closely enough to add much more.

@davidakennedy
11 months ago

Fixes specificity problem with @supports statement.

#6 @davidakennedy
11 months ago

  • Keywords needs-testing added

Thanks for the report @dlh!

In 39073.2.patch, I fix the issue, which ultimately is a CSS specificity problem. I move the feature query below where it's applied in browsers that don't support feature queries or object-fit and apply the appropriate selector for the interior pages. The problem was that the rules had the same specificity, so this way, the cascade takes over.

We still need the transforms and position changes for fallbacks in browsers that do not support object-fit and feature queries.

#7 @sanchothefat
11 months ago

  • Keywords needs-testing removed

@dlh no worries, me either. I'm just not able to reproduce what you're seeing there

@stormrockwell
11 months ago

This fixes inheritance issues with transform on header images that aren't the home/front page

#8 @peterwilsoncc
11 months ago

Tested @davidakennedy's patch in a range of browsers, works for me:

  • IE 8 - 11
  • Latest on Mac: Chrome, Firefox, Safari
  • Latest on Windows: Chrome, Firefox

I'm happy for it to go in trunk.

This ticket was mentioned in Slack in #core by davidakennedy. View the logs.


11 months ago

#10 @helen
11 months ago

  • Keywords commit dev-reviewed added

#11 @davidakennedy
11 months ago

  • Owner set to davidakennedy
  • Resolution set to fixed
  • Status changed from new to closed

In 39495:

Twenty Seventeen: Fix CSS specificity problem with CSS feature query for object-fit

Previously, the theme's CSS feature query for object-fit overrode styles it shouldn't have on interior pages.

This moves the feature query farther down in the stylesheet so it takes precedence in the cascade in supported browsers, and applies the appropriate selector for the interior pages. In browsers that don't support feature queries or object-fit, the fallback styles are still applied. The problem was that the rules had the same specificity, so this way, the cascade takes over properly. The transforms and position changes for fallbacks are still needed in browsers that don't support object-fit and feature queries.

Props peterwilsoncc, davidakennedy.

Fixes #39073.

#12 @ocean90
11 months ago

In 39497:

Twenty Seventeen: Fix CSS specificity problem with CSS feature query for object-fit

Previously, the theme's CSS feature query for object-fit overrode styles it shouldn't have on interior pages.

This moves the feature query farther down in the stylesheet so it takes precedence in the cascade in supported browsers, and applies the appropriate selector for the interior pages. In browsers that don't support feature queries or object-fit, the fallback styles are still applied. The problem was that the rules had the same specificity, so this way, the cascade takes over properly. The transforms and position changes for fallbacks are still needed in browsers that don't support object-fit and feature queries.

Merge of [39495] to the 4.7 branch.

Props peterwilsoncc, davidakennedy.
See #39073.

Note: See TracTickets for help on using tickets.