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.
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.
@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?
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!
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.
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
