Skip to content
This repository has been archived by the owner on Nov 21, 2023. It is now read-only.

fluidbox-overlay not expanding to viewport if an ancestor has a transform property #165

Closed
marcofugaro opened this issue Feb 24, 2016 · 3 comments

Comments

@marcofugaro
Copy link
Contributor

I just came across a little bug, if I apply Fluidbox to an element and its parent or any anchestor has a tranform property set, the white backgorund (fluidbox-overlay which has a position: fixed and top left bottom right to 0) expands only to that element and not the whole viewport.

This is due to this css issue, and I don't think there are any easy and worth fixes. We could try putting it in position: absolute and wrapping the whole body with it, but I personally think this isn't worth it.

Just tought you might want to know this and maybe add it to the Known Issues section.

@terrymun
Copy link
Owner

Added to the readme in 2705f73. Thank you :)

@GrantSavill
Copy link

GrantSavill commented Feb 20, 2020

I've just come across this issue, is there a workaround? Setting the overlay to have width: 100vh makes sense to me but not sure where to go from there.

Edit: Sorted it.

width: 100vw;
transform: translate(-50%);
left: 50%;
right: 50%;

@attaway
Copy link

attaway commented Aug 21, 2023

this is still an issue when using fluidbox within a slider such as swiper.js

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants