search

terrymun / Fluidbox

Replicating and improving the lightbox module seen on Medium with fluid transitions.
http://terrymun.github.io/Fluidbox/
Other
2.15k stars 170 forks source link

On Chrome: translate mispositioning #190

Open nbelo opened 7 years ago

nbelo commented 7 years ago

It seems that on Chrome, the calculation of the translate values, for scrollable pages, some times are off screen. The magnified image got this css value: translate(-203px, 2170.24px) scale(3.38, 3.38) When in fact the correct position for the vertical coordinates, would be around 200px. Thx

terrymun commented 7 years ago

This is not a bug. You have created a new stacking context in the container (or any of its parents). Fluidbox works by positioning the element absolutely against the entire viewport size, so if you have, say position: relative set on any of the parents, that will throw the positioning off.

Please refer to: Precautions.

If you have a proof-of-concept example, do share it and I can tell you what went wrong.

nbelo commented 7 years ago

This only happens when I change to the Test environment, and only on Chrome. It works on Firefox and IE11 (incredible :-) ). So, somehow, Chrome is calculating more than 1000px in the vertical coordinate . It even works in my local environment on Chrome (same browser).

Update: Yes, I've seen the Precautions section, the Rebind could be a solution because the image is hidden.

terrymun commented 7 years ago

If you can reproduce the issue with minimal code, I will be more than happy to help. Right now it's impossible for me troubleshoot your setup: for that,, I will close the issue in due time.