Streaming live at 10am (PST)

Fixed position attribute all of a sudden stopped working?


#1

Hi - I was working on translating my “portfolios” page (referred to as “portfolios Copy” in the Designer) to the iPad/mobile breakpoint. Everything was going smoothly and I was careful not to rearrange any of the elements, only change their CSS properties. I had 2 scroll animations, one for the desktop (with the other break points unselected) and one for the mobile breakpoints (with the desktop break point unselected). It all worked fine testing it. I hit publish and test in my browser…

That’s when the strangest thing happened… these two elements:

divs that are position: fixed, just seemed to be disregarding their fixed position. I have tried checking all my properties again but nothing seems to be the source of the problem. Even more inexplicable is the divs DO fix their positions when I am in the designer… it was working earlier just fine. And bizarrely, the “where boys will be boys” page had problems at the same time as the “portfolios Copy” page, even though I wasn’t working on it at all.

Can anyone help me troubleshoot this?

Here are links to the published pages, read-only site link below…

portfolios Copy page - http://portfolio-site-214a92.webflow.io/portfolios-copy
where boys will be boys page - https://portfolio-site-214a92.webflow.io/where-boys-will-be-boys

Thanks,

Nick

P.S. I’ve tried clearing my cookies/history, testing in both Safari and Chrome, restarting both browsers, logging in and out of webflow… nothing has worked.

P.P.S Just to provide further information, the CSS property seems to uniformly not work. If I apply it to other elements on the page, they also don’t fix to the viewport… although as you can see, my navigation items are remaining fixed as they should… so that’s quite confusing. I’m sure I’m missing something obvious but I can’t figure out what it is.

P.P.P.S. The problem is persisting onto a new page (name: Orlando)… I made this page by duplicating “where boys will be boys”, duplicating classes/animations accordingly… here is a video of the fixed-position attribute working on the designer but not working on the preview:

high res: https://adobe.ly/2PbGhuS (stored on Adobe CC)
low res: https://adobe.ly/2TWPkDB (stored on Adobe CC)


Here is my site Read-Only: https://preview.webflow.com/preview/portfolio-site-214a92?utm_source=portfolio-site-214a92&preview=6532666811a6dde76efa787602d44637


#2

What is fixed - and not working? (Add screenshot with arrow “this–>” + class name)
This is mobile problem (On specific device)?

I look at your css code (source) - i find fixed only for the navbar and nav elements


#3

Hi - see the videos for some more information but the class name of what ought to be fixed in each page is as follows, sorry for not including it initially.

page: portfolio Copy
class: main-image-wrapper

page: where boys will be boys
class: main-image-text-wrapper

page: orlando
class: main-image-wrapper

It is a problem on all devices.

It is interesting to me that when you looked at the source code you are only seeing fixed for the nav bar and nav elements…

as you can see in this screenshot from page: orlando; class: main-image-wrapper, this clearly should be fixed.


#4

animate-to-position-fixed

The problem is from the interactions.

Orlando page - Where? Her:
image

What?
image

For now, remove this animation.

-or- move the image from “portfolio-section”
image

Anyway, its little weird to move fixed position element (fixed = not move)


#5

Summary - I made a test. If you set the child to position:fixed; and move by interaction the parent - webflow override the fixed position.

example:

new-landing-page-94e5db.webflow.io/home-copy

I dont know if this a bug - or reasonable behavior (@Brando please take a look).


#6

Wow thank you! I would not have thought of that. It fixed it!


#7

Great :slight_smile: mark as solution to close this topic :slight_smile:


#8

Thanks for pinging me @Siton_Systems

I think this was expected based on how it was set up. You gave some excellent advice here, thank you very much :bowing_man: