WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 18 months ago

Last modified 18 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 18 months ago.
39073.diff (623 bytes) - added by peterwilsoncc 18 months ago.
39073.2.patch (1.7 KB) - added by davidakennedy 18 months ago.
Fixes specificity problem with @supports statement.
Sample_Page_–_WordPress_Commit.jpg (396.4 KB) - added by peterwilsoncc 18 months ago.
39073.3.patch (722 bytes) - added by stormrockwell 18 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
18 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 18 months ago by nonproftechie (previous) (diff)

#2 @peterwilsoncc
18 months ago

  • Keywords has-patch added

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

#3 @davidakennedy
18 months ago

  • Milestone changed from Awaiting Review to 4.7

#4 @sanchothefat
18 months ago

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

#5 @dlh
18 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
18 months ago

Fixes specificity problem with @supports statement.

#6 @davidakennedy
18 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
18 months ago

  • Keywords needs-testing removed

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

@stormrockwell
18 months ago

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

#8 @peterwilsoncc
18 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.


18 months ago

#10 @helen
18 months ago

  • Keywords commit dev-reviewed added

#11 @davidakennedy
18 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
18 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.