search

fancyapps / fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
http://fancyapps.com/
7.28k stars 1.78k forks source link

Scrollable Ajax content jumps to the middle after opening on mobile device. #2125

Closed ghost closed 5 years ago

ghost commented 5 years ago

I have a fancy box link that opens an Ajax content that is longer than the viewport on mobile (iPhone 8) and after opening the fancybox, the content jumps in the middle instead of staying on the top.

The close button [X] also seems not to be fixed to the top right. It moves with the content while scrolled before staying again to the top right.

Note: When you inspect it on chrome with the 'toggle device toolbar', the problem doesn't show up. Although it used to before. What I did was I made the height of .fancybox-container and .bleed to auto instead of 100% and it doesn't show up anymore. However, on actual mobile device, it still does. As a matter of fact, the outcome that I want is that of the chrome on desktop when you toggle it to mobile.

How to recreate the issue: open on mobile device, click on the card (the fancybox) Expected: content should stay on top unless scrolled. Close button should stay fixed on top right. Current state: content jumps to the middle. Close button moves. Device: iPhone 8 Browser: Safari, Chrome, Firefox, Framework: Foundation 8 for sites Other scripts: Flickity on the Fancybox content

ghost commented 5 years ago

I found the issue. It's anchoring to the .customnav. Hiding it in CSS solves the problem. But, it's also anchoring to .withcarousel which I cannot hide because it's where the carousel is. Now I don't know why it's making the page drop.

fancyapps commented 5 years ago

Hi,

Most likely this is caused by "auto focus" feature, to disable this, set autoFocus: false.

ghost commented 5 years ago

Hi,

Most likely this is caused by "auto focus" feature, to disable this, set autoFocus: false.

It is that. Thanks!