Fixed position item not fixed and not breaking out of the page flow

I’m working with a page that has a bit of a complicated modal situation happening in one section. Ideally, the following should happen:

  • users would hover over a callout which is placed over a photo
  • on hover a item preview should appear (pulling from a collection list) with a “view item” button within the hover window.
  • upon clicking the “view item” button, a modal window (fixed position) would appear, taking over the entire viewport

My issue right now is that the fixed modal window isn’t behaving as fixed. it begins at the edge of its parent element instead of breaking page flow, and scrolls with the page.

Read Only Link (sorry in advance that this is so poorly organized):
https://preview.webflow.com/preview/aso-wireframe1?utm_source=aso-wireframe1&preview=dcbee37352aaeb76f15c9869606b1e0b

Here’s where the problem is:

Any help is very greatly appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Position:fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform , perspective , or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top , right , bottom , and left .

Does this apply?

except when one of its ancestors has a transform , perspective , or filter property set to something other than none

If not, it might be easier to diagnose if you could copy just the elements needed to replicate the problem to a new page, and reference that.

I just checked all of the parent elements, and it seems like it doesn’t apply. No trace of transform, perspective, or filter properties assigned anywhere. I also checked in a few different browsers and found that the issue persists.

Here is a link to the section within its own project
https://preview.webflow.com/preview/fixed-position-issue?utm_source=fixed-position-issue&preview=6474a73fa54b183a45d0ddef6aaae058

Can you publish that so it can be inspected apart from the designer?

Yes! Here you go https://fixed-position-issue.webflow.io/

Except for when the element is displayed by the interaction.

CloudApp

Ah! I didn’t even consider that. That solved it! Thank you so much!!

@webdev I have one more quick question! I’m having similar issues as above with a modal that is fixed, but not breaking out of the slider box that it is nested within. I’ve looked at the code and it looks like removing this transform from the slide solves the issue. Still, I’m not sure how to do that within Webflow. I’m assuming the line is showing up because of the slide transition (I could be wrong) - is there any way to set slider animation to none?

You are right, and I don’t believe there is a way to do that.

You should be able to move the modal out and use a trigger in the slide to display it. I would need to see the specific page to be more helpful.

That makes sense! The only issue with moving the modal out is that it needs to live within a collection item (located within the slider) to adopt the item’s properties. I think I can accomplish what I need to do with tabs instead of a slider! I’ll try that for now!

Thank you for all your help!

Just an FYI, you can have content that is hidden in the slide (from the cms), loaded into another element outside a collection list; via javascript. One line of code with JQuery.

I also came across a similar problem.
May I know which one line of JQuery code to use?

My problem is in the link below.

Please help. Thank you.

Did you ever figure this out Stephanie? I’m facing the same problem, and can’t fix it by using tabs unfortunately.

I’ve come across this problem a few times now. Anyone had any luck fixing with jquery?

Hi all,

Can someone tell me if the seemingly random intricacies of how code works in webflow translate directly also into how code works on regular websites?

This might seem like a stupid question, but are they 1:1 comparable? OR - are there issues with creating effects and styling in the code in Webflow that don’t necessarily translate to vanilla coding?

For Example:

Would the issue whereby fixed position does not stick to the viewport if the ancestor/parent element has a filter, perspective or transform applied also be the case on a regular website that was coded from scratch? or is this just a webflow thing for some reason?

Would one of the moderators be able to answer this for me please :slight_smile:

@webdev

Thank you all very much!