Embed code weird behaviour on interacation

Hello :slight_smile: :wave:
I’m building my music website and added a few embed codes such as Facebook Like button, Facebook Share button, Spotify Follow button, and lastly an embedded Bandcamp Player.
I’ve added some scroll interactions.

I’ve been experiencing weird behavior where the embedded buttons disappear when scrolled. I created a scroll interaction for its position and opacity.
It worked well but then started to behave like this -
The Facebook like button (and it’s title) is being cut when scrolled. it looks like a bug.
Screenshot attached -

Does anyone have an idea why is it happening? or been experiencing such behaviors with embedded codes?

Thanks in advance!


Here is my public share link: https://preview.webflow.com/preview/shacharzadik-com?utm_source=shacharzadik-com&preview=786b46daafbc68429ae5f3eb9526b730

(how to access public share link)

Hi @Daystar,

Did you try set the overflow of the parent container to visible ?
Seems to do the trick for me:

Hi Anthony,
Thanks for your help!
I did try to change it to visible. It’s not working i’m afraid.

Although I did not change anything now the other embeds are not being displayed as well, and the bandcamp player is also cut.

Any idea?

I tried adding a new embedded buttons on a new section and it’s not being shown as well. So I don’t think it has to do with the interaction, as now the embed codes on the footer works well.

Working fine on my end while using the Webflow Designer preview.
Do you have a published link ?

Yes :slight_smile: on preview it looks fine, but on published it looks like this -
http://shacharzadik-com.webflow.io/

Thank You!

mmh, you’re playing with webflow left padding to position your embed… i think it might mess up with your embed code itself as in your embed code the overflow value is set to hidden.

Try set the overflow value of within your embed code to visible instead and publish the page again.

Hope that helps.

Thank You! I tried but it won’t work. Also the same code works at the bottom of the page and other embedded codes such as the facebook share button doesn’t show either.

what about a simplified cloneable project so we can try publish changes aswell - since the behaviour seems to appear only on published site ?

One mor thing you could try is put 10px margin on your embeds + set the z-index to 9999 and its overflow to visible. Try also explicitly set embed’s parent div overflow attribute to visible.

Couldn’t find how to make a project cleanable?

Thanks :slight_smile: