Possible bug with Glide sticky navigation with Hover Image

This may be a bug or a known incompatibility, but adding a Hover Image stack into Glide breaks the sticky navigation effect of Glide.

Hi there @Bioguy – If you’d like to post up a link to a ZIP file that contains a copy of your project file I’d be happy to take a quick look at it and see what the problem might be.

Of course, but I didn’t include a link or file because it isn’t limited to any specific project of mine. I take it you don’t see this then?

Here is a fresh, one page project with one Glide Stack and some random Foundry stacks thrown in plus a Hover Image.

Then, this is what I see before adding in a Hover Image stack and then after. The same thing happens when previewing in Safari.

I like to have a project file in-hand before diving into recreating it myself. This allows me to see exactly what you have on the page, what the interactions and configuration is and whatnot. Saves us all a lot of time in the end.

I will take a look at this after lunch and see what I can suss out.

So the problem lies with how a few things work. Partly it has to do with the way Stacks applies overflow: hidden to most stacks items. This is purposeful and understood, but some stacks need to break out of this confinement and set elements to overflow: visible to achieve some effects, whether they be animations, drop shadows or what not.

In this case the Glide stack does not like to be forced to have overflow: visible… but stacks like Hover Image need this to show some of its animations. This leads to a conflict between the two, with Hover Image winning out in this case.

I think I can work around this by looking at the page to see if Hover Image is within a Glide stack and only apply the overflow: visible up to a certain point. This should fix the problem for the most part, but I’ll have to see after some testing.

This occurs with other stacks that force overflow: visible on elements as well when placed inside of the Glide stack. It is just a negative interaction because of the way the two things work.

With all that being said, I think I can make the two play well together, but will need to do some testing after I get the fix coded up.

Addendum: The one caveat will be that animations that might go outside of the main content section of the Glide stack will be cut off.


Thanks for the detailed explanation.

I don’t know if there is anything to be gleaned from this, but I also have a copy of Nick Cates’ Rails stack and it seems to behave fine with Hover Image.

On the outside they look so similar, but perhaps the coding is very different. I really wouldn’t know.

They are indeed differently coded. While similar, they’re definitely different creations and thus work differently. As I mentioned, I should be able to make it all coexist, just have to dive into the code and get it going, along with do some testing afterwards.


Appears to be fixed with your latest update. Thank you. :slightly_smiling_face:

1 Like

Good to hear. I’ll go ahead and mark this one as solved then.

1 Like