Twenty Seventeen header image is compressed

[dlh]

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

[nonproftechie]

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)?

[peterwilsoncc]

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

[sanchothefat]

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

[dlh]

@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]

Fixes specificity problem with @supports statement.

[davidakennedy]

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.

[sanchothefat]

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

[stormrockwell]

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

[peterwilsoncc]

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.

[davidakennedy]

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.

[ocean90]

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.