New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twenty Seventeen: Featured images aren't being pulled in to content panels when video header is enabled in Chrome #168

Closed
lizkarkoski opened this Issue Jun 20, 2018 · 23 comments

Comments

@lizkarkoski
Copy link

lizkarkoski commented Jun 20, 2018

History of issue in this forum thread:
https://en.forums.wordpress.com/topic/twenty-seventeen-theme-video-header-causes-images-to-disappear/#post-3129805

I have replicated the report on freetestblogliz.wordpress.com and will leave it set up to view.

To replicate -

  1. enable Twenty Seventeen on WordPress.com site
  2. set a video header via Customizer
  3. add featured images to pages
  4. set content panels in Customizer
  5. view site in Chrome - the featured images aren't getting pulled in. in their place you'll see a gray/white variegated place holder as scrolling down the site.
  6. view site in FireFox, and everything works as expected.
  7. view site in Safari and see that the video header is shifted way to the left leaving a white spice on the right hand side. The featured images are not pulled in with Safari either.

I am using Mac OS 10.13 high sierra
Chrome 67
Safari 11.1
FireFox 54 (and then again on 60.0.2)

Expected

In Chrome:
I expect that the theme will function like the site demo. When a video header is enabled the featured images from the pages assigned to the content panels do not get incorporated. In the designated feature image space you'll see a gray and white variegated panel.

In Safari:
The featured images function the same as above in Chrome. The video header is shifted to the left and leaving a blank white strip to the right of the header section.

In FireFox:
The theme functions as expected.

  • User report: [shortlink to chat/forum thread/ticket, ie #12345-hc]
  • Follow-up ticket: [shortlink to ticket, ie #12345-zd]
  • User's site: [link to user's site, including the specific page/post where issue is present]

@lizkarkoski lizkarkoski added this to the Twenty Seventeen milestone Jun 20, 2018

@jenlynnemc

This comment has been minimized.

Copy link

jenlynnemc commented Jun 24, 2018

User also has the same issue with their site that started days ago:
insideparticipium.wordpress.com

The demo for the site https://twentyseventeendemo.wordpress.com/ is also having the same issue.

@chrstfer

This comment has been minimized.

Copy link

chrstfer commented Jun 26, 2018

Same browsers, same issues, same versions, still works on firefox 61.0b8.

@KokkieH

This comment has been minimized.

Copy link

KokkieH commented Jun 27, 2018

Update from the original reporter: even after removing the video header, featured images are still not displaying for the sections in Chrome, consistent with the demo site mentioned above which also does not have a video header set.

Just another note that the user who reported this is using the Core version of the theme on http://gardenback.co.uk/, but this appears to be happening in both the Core and WordPress.com versions.

@dvdwhite

This comment has been minimized.

Copy link

dvdwhite commented Jun 29, 2018

Same bug, same browsers, presents itself on the 2017 theme website. http://2017.wordpress.net/

@laurelfulford

This comment has been minimized.

Copy link
Contributor

laurelfulford commented Jul 6, 2018

I can see this issue on http://2017.wordpress.net/, and can recreate it on my test site to a lesser degree (the images are shifted, but not as much).

I think I may have found a fix by adding the following CSS to .panel-image but it needs more testing before being used as anything other than a Custom CSS work-around:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

From: https://stackoverflow.com/questions/50804554/css-background-attachment-fixed-fix-for-chrome-67.

Because this is happening on self-hosted sites, the issue also needs to be moved to https://core.trac.wordpress.org. I think there's already an issue there referencing it (https://core.trac.wordpress.org/ticket/44479) -- I'll drop in a comment and screenshot there to see if I can get the original reporter to confirm that's what they're seeing, so I don't create a dupe.

In Safari... The video header is shifted to the left and leaving a blank white strip to the right of the header section.

@lizkarkoski This sounds like this issue here: https://core.trac.wordpress.org/ticket/40522 -- I need to circle back and get that reviewed so it can be merged.

@laurelfulford laurelfulford self-assigned this Jul 6, 2018

@laurelfulford

This comment has been minimized.

Copy link
Contributor

laurelfulford commented Jul 6, 2018

#174 is the same issue, so I'm moving reports from there to here:

Hattip @sashastone & @jessestu

@donalirl

This comment has been minimized.

Copy link

donalirl commented Jul 14, 2018

Another case here: #1278927-zd (requires follow up when fixed)

@eoinsav

This comment has been minimized.

Copy link

eoinsav commented Jul 14, 2018

Another report: #1262231-zen.

@juliasydnor

This comment has been minimized.

Copy link

juliasydnor commented Jul 16, 2018

Another report in 1282095-zen. They have added a header image (not video), and are experiencing the same issue. Confirmed the images display correctly in other browsers but Chrome.

@donalirl

This comment has been minimized.

Copy link

donalirl commented Jul 17, 2018

Another report in #5058501-hc. The issue is present in Opera, which I understand is Chrome-based. Firefox, Safari and IE are unaffected. (requires follow up when fixed)

@KokkieH

This comment has been minimized.

Copy link

KokkieH commented Jul 17, 2018

Another report in the forums.

@arunsathiya

This comment has been minimized.

Copy link

arunsathiya commented Jul 17, 2018

1284877-zen

They haven't added a video, but a featured image to the selected page, on Theme options

Shared the CSS code suggested here and it helps solve this issue for now.

@adelineyaw

This comment has been minimized.

Copy link

adelineyaw commented Jul 18, 2018

1282004-zen

Another user with an image (as their header media) and featured images used on their selected Front page sections (via Customize > Theme Options).

This user is on a Personal plan so the CSS work around won't be applicable (unless they upgrade). If we can work on a solution for all plans that would be great 😃

@suramakr

This comment has been minimized.

Copy link

suramakr commented Jul 18, 2018

Folks when is the fix for this likely. This is pretty serious as you must have guessed. Are there not any test cases that get triggered with things like this, to not impact live sites.

In my case, I am using the theme from wordpress site, for just a month now (so it is very recent version), and it is directly hosted on wordpress site.

For folks who host on wordpress what is the solution now -- specially those on PERSONAL plan? I was about to launch my website today with this theme, and now my launch has come to a grinding halt.

Kindly suggest what is the workaround (other than moving out of this theme).

I saw your recommended fix which only applies to BUSINESS PLAN the highest tier , how do others benefit from this.

PS: I just hope wordpress isn't using this bug as forcing function/strategy to get folks to upgrade to business PLAN since this template is from the WORDPRESS TEAM.

I think I may have found a fix by adding the following CSS to .panel-image but it needs more testing before being used as anything other than a Custom CSS work-around:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

@laurelfulford

This comment has been minimized.

Copy link
Contributor

laurelfulford commented Jul 18, 2018

I've updated the theme on WP.com in r49055-wpcom-themes. It isn't fixed in Core yet (there is a patch pending) -- this is more of a short-term thing until it's fixed there. For folks who are self-hosted, the CSS work-around above should do the trick until the issue has been fixed in Core.

I've added comments to any ZD tickets I could, and followed up in the forum threads.

There are a few reports that still need to be followed up with:

@jenlynnemc - can you please follow up with the user who reported the issue on insideparticipium.wordpress.com?

@donalirl - can you please follow up with the user in #5058501-hc?

@sashastone - can you please follow up with #1253326-zen (the ticket is closed to comments).

@jessestu - can you please follow up with 4766785-hc & 2563156-hc?

Thanks all!

Are there not any test cases that get triggered with things like this, to not impact live sites.

@suramakr Unfortunately, this issue started in Chrome after an update to the browser, not a change in the theme.

@jessestu

This comment has been minimized.

Copy link

jessestu commented Jul 19, 2018

Users are notified. Thank you, Laurel!

@laurelfulford

This comment has been minimized.

Copy link
Contributor

laurelfulford commented Jul 19, 2018

Thanks @jessestu!

@sashastone

This comment has been minimized.

Copy link

sashastone commented Jul 19, 2018

Follow-up sent to user: 1291519-zen

Thanks Laurel!

@donalirl

This comment has been minimized.

Copy link

donalirl commented Jul 19, 2018

User from #5058501-hc has been notified. Thanks!

@blazevivan

This comment has been minimized.

Copy link

blazevivan commented Jul 26, 2018

Follow up sent for this one #1282095

@markrsmith

This comment has been minimized.

Copy link

markrsmith commented Aug 1, 2018

Same issue. The CSS trick works, but I hope it's updated soon in core.

@agbarbosa

This comment has been minimized.

Copy link

agbarbosa commented Aug 10, 2018

Guys, how can I download or check the CSS workaround mentioned by @laurelfulford?

@IAmDarthMole

This comment has been minimized.

Copy link

IAmDarthMole commented Aug 15, 2018

@agbarbosa I'm not sure if you still needed the answer, but after doing so myself, I can confirm it fixes the issue. Please see the steps below.

  1. Go to Customize for your Twenty Seventeen theme and then select the additional CSS section as shown below.

screen shot 2018-08-14 at 11 00 58 pm

  1. Add the script in the picture below into the box and then publish. The script in the image is from @suramakr 's post above (9 above mine at the bottom of his explanation).

screen shot 2018-08-14 at 11 01 10 pm

Hope this helps and thank you greatly for everyone's help and contribution!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment