WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 10 months ago

Last modified 10 months ago

#40522 closed defect (bug) (fixed)

Twenty Seventeen: Youtube videos are left aligned in Safari

Reported by: shireling Owned by: laurelfulford
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:
PR Number:

Description

This is likely related to #39893 and #39616. Youtube video headers are left aligned when viewed in Safari.

I've reproduced the issue on Safari version 10.0.3 (12602.4.8)

Screenshot:

https://cldup.com/TX6Eo1WbyR.png

The black bars are a separate issue being discussed in the two threads linked above, but the video is also not displaying full width in this browser.

Attachments (2)

40522.patch (579 bytes) - added by laurelfulford 2 years ago.
customizer.png (295.7 KB) - added by desrosj 10 months ago.

Download all attachments as: .zip

Change History (16)

#1 @laurelfulford
3 years ago

#40625 was marked as a duplicate.

#2 @laurelfulford
3 years ago

  • Keywords needs-patch added

I can also see this issue, in Safari 10.1.

#3 @ocean90
2 years ago

#40625 was marked as a duplicate.

@laurelfulford
2 years ago

#4 @laurelfulford
2 years ago

I assumed that this was a simple issue of Safari positioning the iframe too far left, but that doesn’t seem to be the case. It’s positioning the iframe just fine, but when the video starts inside of the iframe, the video itself is somehow too far left.

https://cldup.com/PF2wkOii9U-3000x3000.png

I was able to recreate the same issue with some barebones styles from the theme using Codepen - one example has the video set to autoplay, and the other doesn’t. In the one that isn’t set to autoplay, the still image at the beginning is in the right spot, but the video jumps left once you start playing it:

Removing the object-fit: cover style seems to fix.

I’m not exactly sure why this is an issue with iframes in Safari, but the good bit is, it doesn’t look like the style does anything for that element. The iframe doesn’t scale the same as images and videos (which causes #39616 and #39893); simply setting the iframe to 100% height and 100% width seems to have the same effect.

Attached a patch that removes the iframe from the styles associated with object-fit: cover. Let me know if there’s a reason to keep it - if so, there might be another way around this issue, since it’s only happening in the one browser.

#5 @noisysocks
2 years ago

Was working with a WordPress.com user that ran into this bug and can confirm that @laurelfulford's patch fixes the issue.

This ticket was mentioned in Slack in #forums by zoonini. View the logs.


22 months ago

#7 @laurelfulford
16 months ago

  • Keywords has-patch added; needs-patch removed

#8 @laurelfulford
16 months ago

  • Keywords needs-testing added

#9 @laurelfulford
11 months ago

#45509 was marked as a duplicate.

#10 @laurelfulford
11 months ago

  • Milestone changed from Awaiting Review to 5.0.2

#11 @laurelfulford
11 months ago

  • Milestone changed from 5.0.2 to 5.1

@desrosj
10 months ago

#12 @desrosj
10 months ago

  • Keywords commit added; needs-testing removed

Added customizer.png to show that the issue was worse in the customizer for me.

I gave 40522.patch some testing (Safari, Firefox, Chrome on MacOS) and that does fix the issue for me. I also could not find a reason to keep this.

#13 @laurelfulford
10 months ago

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

In 44669:

Twenty Seventeen: Prevent YouTube videos from being cut off in Safari.

The theme's object-fit: cover styles for the header caused YouTube videos to be positioned too far left in Safari.

Fixes #40522.

#14 @laurelfulford
10 months ago

Thanks for the testing, @desrosj!

Note: See TracTickets for help on using tickets.