Twenty Seventeen: Wrong focus header image

[Psychosopher]

Using Edge as browser the focus of the header image on posts and pages is not the same as when using Firefox, Chrome or Opera.

[davidakennedy]

Hey @Psychosopher – thanks for the report!

Can you clarify the issue? When you say, "focus of the header image", do you mean focusing on it with the keyboard or something else? How is it not the same?

A good format to follow for bug reports is this:

Steps to reproduce
1. Starting at URL:
2.
3.
4.

What I expected


What happened instead


Browser / OS version

[Psychosopher]

Screenshot Firefox

[Psychosopher]

Screenshot Edge

[Psychosopher]

@davidakennedy, sorry for not being clear!

With focus I mean the center of the image or how the image is cut.

I added to screenshots.

[davidakennedy]

@Psychosopher Perfect! Thank you for taking the time to make things clearer. That really helps!

The reason you're seeing this isn't a bug. Twenty Seventeen uses a number of new CSS properties. Two of them are @supports and object-fit. In Twenty Seventeen, these are used in combination. Feature queries, or @supports, allows us to test if a browser can handle certain other CSS properties. In the theme, we use feature queries to test for object-fit in the header image/video area. Browsers that can use object-fit do so, and those that can't fall back to something else. object-fit lets us nicely fit and center images/videos in an area. So Firefox supports object-fit and it looks nice. Edge doesn't (yet), so it gets the fallback. More on that here: ​http://caniuse.com/#feat=object-fit

So with that said, I'm going to close this since it's not a bug.

[Psychosopher]

Thank you for the explanation! Interesting.