Streaming live at 10am (PST)

Trouble with fixed background images not remaining fixed on touch screen devices


#1

@Waldo

Here are some screen shots and a screen recording to further illustrate the issue I am having with the FIXED Backgrounds not staying put in Windows 10:


Here is my public share link: https://preview.webflow.com/preview/glcac?preview=646d71e490397efbb06c7b09465b4b49


#2

Hey @Brian_M_Fromknecht are you by chance on a touch screen device? I took a look at those pages and everything looks to be scrolling correctly on my end.


#3

Yes I am actually and when I bring it up on my Mac it functions correctly too! I'm designing on a Dell laptop with a touch screen, but I'm not using the touch screen to design. I have the laptop driving a 4K 27" monitor. If I disable the touch screen you think it would help?


Can't fix section background on mobile
#4

Hey @Brian_M_Fromknecht 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:
- 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:

​Please let me know if this solves the problem, if not, I’m happy to help further :slightly_smiling:


Fixed BG images are not working as expected on touch/mobile devices
Fixed position background image scrolls (video included)
#5

That totally makes sense! Now I have to wait till tomorrow at work to try it... I will let you know how it pans out - thx @Waldo


#6

Sounds great @Brian_M_Fromknecht feel free to reach out again if you're having any trouble :smiley: have a great evening :smiley:


#7

@Waldo
Oh man you are a wizard! I just did exactly what you said:
- 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

And it worked PERFECTLY!!! Thanks Waldo! If i ever find you - I owe ya a pint!

Cheers!
B


#8

Haha @Brian_M_Fromknecht so happy that I could help, I'm located in Missouri if you're ever around here haha :slightly_smiling: Please feel free to reach out anytime if you have any questions, I'm here to help. :slightly_smiling:


#9

Trouble is still not fixed(((


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.