Dara: Slider overlapping top of content

[thesacredpath]

I've not been able to reliably reproduce this in Chrome, Safari, or the Firefox regular version, but can in Firefox Developer Edition nearly every time. I was able to see it once in Chrome.

Steps to replicate

1. Clear FF Dev cache and then visit the Dara Demo site: https://darademo.wordpress.com
2. Content is tucked up under the slider. Click on a menu item and then go back to home page and the issue does not occur.
3. Clear browser cache and then reload page and nearly every time the issue will reoccur.

Screenshot:
https://cldup.com/fYAKrrrFYm.png

Slack conversation with @crunnells in #themes: https://a8c.slack.com/archives/C029FM1EH/p1529527358000002

Expected

Content to be properly aligned under slider.

• User report: https://en.forums.wordpress.com/topic/dara-theme-home-slider-is-over-page-content/
• User's site: http://closroseraie.wordpress.com/

[Lochlaer]

User is reporting this same issue in #1604482-zen.

[caimin-j]

Had a user reporting the same issue.
#1638045-zen

Their screenshot:

Haven't been able to reproduce in Chrome, but it happens in Firefox every time. My screenshot:

At least with FF, the issue doesn't seem to be strictly cache related. When resizing the window, I found the issue corrected itself:

Could be something connected with responsive resizing?

Maybe the cache impacts this sometimes because the theme is trying to resize the image before it's fully loaded (and the true image height/width is available)?

Just some wild guesses thrown in ;)

[ivan-ottinger]

Do we have any time estimated when this issue could be addressed?

[sophiegyo]

I use Firefox and can replicate:
http://cld.wthms.co/Irn3BT

It seems to switch back and forth. More often than not, it triggers on a page refresh, but one in maybe 10 refreshes loads the page normally.

[liviopv]

Also able to reproduce on Firefox.

Doing anything that forces the slider to become "active" (like manually viewing to another slider image) makes the error go away:

Video: http://cld.wthms.co/Tqdp2J

Pinged pNEWy-crr-p2 to prioritize since this feels like a pretty big bug

[laurelfulford]

I was able to recreate this on reloading the theme demo's front page in Firefox; I had less luck recreating when visiting the site fresh, in an existing or incognito window.

[laurelfulford]

Tested on https://sebagork.com/, and it's not fixing there, so doubling back to check the fix.

[laurelfulford]

Yeah, got a little too clever -- my initial fix wasn't working when there was only one slide, but looks like it is now with the latest update.

I've already followed up on these two reports:

• https://en.forums.wordpress.com/topic/dara-theme-home-slider-is-over-page-content/ - added comment to thread.
• #1638045-zen (https://sebagork.com/) - confirmed it's actually fixed now, and added a note to the ticket.

Pending followup:

• 1604482-zen (https://dcan-inc.com/) -- the update still needs to be synced to AT sites; should be by end of week; will add calendar reminder for myself and follow up here/in the ZD ticket. Will leave this open for now.

[laurelfulford]

Yeesh, 1604482-zen is not an AT site, I don't think I gave it enough time to load the first time 🤦‍♀️

It looks like it's fixed there now, too -- I will add a comment to that ZD ticket as well, and close this out.

[laurelfulford]

Reopening issue because the fix is causing problems with shorter images in the slideshow:

The CSS is assuming they're going to be 600px tall and it really, really shouldn't.

Report and followup: https://en.forums.wordpress.com/topic/featured-content-slider-arrows-fell-out-of-place/

[laurelfulford]

An updated fix has been committed in r52799-wpcom-themes.

It's a bit of a nuclear approach -- I've added JavaScript to trigger resize events when the slideshow is complete, and when the images in the slideshow are done loading, to help make sure Firefox has it at the right size. This does mean there can be some overlap while the slideshow is loading, but it will correct itself once all the images are there.

I'm pretty sure this issue is because we changed the theme to use $(document).ready() instead of $(window).load(), to fix the ads issue in #108. The images aren't always loaded when the slideshow is initiated, causing the overlap.

[laurelfulford]

Followed up in the forum thread!