WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

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

@peterwilsoncc
4 months ago

#2 @peterwilsoncc
4 months ago

  • Keywords has-patch added

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

#3 @davidakennedy
4 months ago

  • Milestone changed from Awaiting Review to 4.7

#4 @sanchothefat
4 months ago

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

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

Fixes specificity problem with @supports statement.

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

  • Keywords needs-testing removed

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

@stormrockwell
4 months ago

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

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


4 months ago

#10 @helen
4 months ago

  • Keywords commit dev-reviewed added

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