Streaming live at 10am (PST)

Scroll interaction on fixed element in Edge/IE11 not working


#1

Hi,
My site has a navbar with a background image tiled and fixed to the top of the element. I'm trying to get the navbar to move up on scroll so that the image disappears and also to reduce the size of the logo (stylename='Brand').

It's working fine in Chrome and FF, but in MS Edge the navbar judders as you scroll. IE11 is the same, plus the navbar doesn't move up, so the background image remains in sight.

I've no idea what I can do to fix this, so would really appreciate any help - thanks!

C


Here is my public share link:
https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd
(how to access public share link)


#2

Can you please provide a screencast of the problem that is occurring? Thanks! :sunglasses:


#3

Hi,

I have attached a shot from IE where the navbar background image remains on the screen when I scroll down (it should move out of view as it does in Chrome and FF), but I can't show you the 'jumping' behaviour of the navbar in IE and Edge. To see this, just open the site in either of those browsers and scroll down..

Many thanks
Carol


#4

I might have missed it, but can you share the link to the published version of your site so we can test the behavior? :slight_smile:


#5

Hi,

It's in the original post but here it is again:
https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd1

thanks
Carol


#6

This is the public share link—we'll need the published URL (.webflow.io or custom domain) to test this behavior outside of the editor.


#7

@McGuire http://hortaxdraft.webflow.io/

(I found it in the image provided. :smile:)


#8

Oh good catch!! :stuck_out_tongue:


#9

My apologies. The URL is: http://hortaxdraft.webflow.io/

Carol


#10

Carol, I am seeing the same behavior over here on Edge. :astonished:

Smooth as butter when using the scroll bar, but when using the scroll wheel or trackpad, it hops all over the place! I'm moving this to bugs in the hope that another forum member or someone from the Webflow team can give a more detailed response/workaround.

The behavior is also working incorrectly on Safari, as the social links and the top of your navbar disappear upon page load. The interaction is set to move the navbar up at an 81% offset, yet it seems to happen instantly on Safari. :frowning:


#11

Thanks for your help, though it's a bit disappointing to find it's probably a bug. Have you any suggestions for any way I might work round this, even if it means losing the background image (which isn't a deal breaker)? I really do need the header to shrink smoothly on all devices if possible.

Carol


#12

It works fine on my Safari and Chrome OS. :wink:


#13

@McGuire was using Safari on OS/ioS?


#14

OS X 10.11.5

@VladimirVitaliyevich, are you sure the animation isn't moving the navbar up like this after load? Notice how the black and white pattern at the top of the navbar scrolls out of sight.


#15

Hi

I think I've fixed it now. I found that if I set the background image on the navbar element to fixed, it doesn't work in IE/Edge. However, by changing this to Scroll, it now works in Edge/IE/FF and Chrome.

Can you please let me know how it's looking in Safari as I don't have any Apple devices.

http://hortaxdraft.webflow.io/

thanks
Carol


#16

Works perfectly in Safari on macOS!


#17

Thank you :slight_smile:


#18

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