Streaming live at 10am (PST)

Images with fixed position not fixed on some browsers


#1

Hello!
In recent days I've been working on a website that uses simple parallax effects (fixed images).
It stopped working very recently.

I currently use Google Chrome, and before checking other navigators I even thought it was due to Chrome's update released yesterday.
However, I've tested it in IE, Edge, Firefox and Opera, and it only works in IE and Edge (laggy, but still works).

I've also tested other Webflow templates that uses fixed images, and they're not working either. :worried:


#2

Please share your Webflow Share link so we can take a closer look. Thanks!

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#3

Hey @VladimirVitaliyevich

Thanks for the response.
Here is the link: https://preview.webflow.com/preview/fundyrio?preview=e3aec03332bd46b0631ddc8d2053cf56


#4

It just works fine in other computers. :disappointed_relieved:
I don't think it's something in that specific website. Any other one that uses that feature (including those I do not own) has stopped working properly in my system.

The only things I've changed in my system since the last time it worked was Chrome update (anyway, other browsers are not working either, as I mentioned before) AND installed a cumulative update for Windows 10 (KB3194496).

I'm starting to believe that update affected something. This is really weird.
I will perform some tests in my system to get closer to the problem source.


#5

I used CCleaner and wiped cache and some other trash stuff from the system.
Restarted and everything was back ok. :sweat_smile:


#6

Hi @LuckyScooby,

I have the exact same issue. Using G Chrome on a Dell XPS15 4k, and it functions just like yours was. I use my older Sony Vaio laptop and it works flawlessly. I tried CCleaner and restarting but it didn't solve it. Anything else that you cleaned or fixed that may help?


#7

Hey, to tell you the truth the issue is still happening.

When I wiped cache and other stuff it worked, but some time later it came back.
Now I don't know exactly what is the cause (or a definite solution) because it's literally oscillating, it happens randomly, independently of wiping cache or not. :confused:

Luckily, it works most of the time, but when it doesn't, it seems to mutually affect every browser (except IE or Edge). That's really weird.


#8

This is annoying! What type of computer are you using (model, OS, and video card)? I'm wondering if it's some sort of incompatibility with the hardware or drivers since it displays properly on my wife's older Sony laptop.

I'm running a Dell XPS15 4k with nVidia GT980 on Win10.


#9

I'm running on a Dell Inspiron 3442 (notebook) with Intel HD Graphics 4400, Windows 10.

All drivers and softwares are definitely up to date (I'm "addicted" to software updates lol).

I'm going to dig into javascript and css files to better understand how Webflow tells browsers to handle fixed images. Perhaps there is some light on what could be "oscillating". My best shot is to look at the differences between other browsers and IE/Edge (since they are not being affected).


#10

hey @LuckyScooby :slight_smile:

can you post your Webflow Share Link again (Since the other one is not working anymore :wink:)

@lamarrz Can you please post yours as well. :wink:

I'll be willing to take another close look at it from Chrome and Safari browsers and see if I can dig up anything. :wink:

thanks!


#11

Here it is: https://preview.webflow.com/preview/fundyrio?preview=6501a7d9117bd71d2233cdbe91f306f5

It hasn't been happening lately.


#12

Hi @LuckyScooby, I am still not clear what was not working with the fixed images and interactions, which interaction was it? Can you take a screenshot of the designer if it happens again?


#13

Ran into something similar here that may be pertinent:

html.w-mod-touch * {
background-attachment: scroll !important;
}

Is exported by webflow automagically.

So on my Microsoft Surface (which identified itself as a touch screen), the fixed background image isn't fixed! (this is a good thing because parallax on mobile devices is really crappy) But it was a tad confusing at first.

(and I just looked and see your background-attachment:scroll,fixed is in fact overridden by a similar rule.)

Cheers --Reed


#14

Hi @Reed_Debaets and @LuckyScooby, when working with fixed images for touch devices or mobiles, I would apply the image to a div and apply fixed styling to the div, not to the image.

Support for fixed positioned images on mobile or touch devices can be tricky on touch or mobile devices.

Fixed positioning on a div with a background image that is not fixed should work better. You can set the div to have a fixed position with a z-index of -1 so that other content will scroll over the div.

I hope this helps !


Different Parallax effects possible with Webflow (no custom code required)
#15

Thanks for that tip! ... I didn't realize background images were that much more mobile friendly!


#16

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