Streaming live at 10am (PST)

Background image disappears when interaction triggered


#1

I have an issue with a background image that disappears when an interaction in a completely different section in triggered. When the word Store slides in, the image is gone!?


Here is my site Read-Only: https://preview.webflow.com/preview/mike-jones-knife-tool?utm_source=mike-jones-knife-tool&preview=f123ad8f6bb46eaff98acd5c28533e59
(how to share your site Read-Only link)


#2

Hi @Andy_Gagne

It looks like your preview link goes to 404. Can you please generate a new one and share it once more?

Can you also post a screen recording or screenshots showing the page, section, and elements you are working with?

​Thanks in advance.


#3

https://preview.webflow.com/preview/andygagnewebdesign?utm_source=andygagnewebdesign&preview=17fcdc31d00f3eba6cd13c8657b543a8

This is happening on this site as well. the CTA bar near the bottom of the home page is vanishing randomly!?!?! same idea as the other page. I’ve removed the interaction that was triggering it but it’s still happening! Seems to only happen when scrolling?


#4

https://preview.webflow.com/preview/mike-jones-knife-tool?utm_source=mike-jones-knife-tool&preview=1829f69be7f1ed17d4bf5b4028763713

This is the other site where the background image is disappearing in the CTA bar when the word “store” slides in from the bottom.


#5

Ah I think I know the issue. @Andy_Gagne, are you viewing these sites on a touchscreen computer?

If so this is likely the culprit. We actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).

A work around which you can try is set a Fixed element as the background, try the following: Trouble with fixed background images not remaining fixed on touch screen devices

  • Add in a div, call it “Fixed background” (or whatever you wish)
  • Set the div to Position: Fixed
  • Width: 100%, Height: 100vh (type in 100vh so that it takes up the full viewport)
  • Adjust the z-index of this element to sit behind all other elements :smiley:

I hope this helps! :bowing_man:


#6

Thanks for that, I ended up fixing it by playing with the positioning. I’m not sure what I did but I got it working… and it wasn’t on a touchscreen that I was viewing.

Andy Gagne


#7

Oh good to hear you got it working :tada: