Hello,
I am using a modal to display large res versions of images when viewing on mobile. This way the user can choose whether to load the larger file as well as examine the image in more detail.
You can see the webpage that has the problem on mobile https://glewindesign.com/project_1.html
The 1st issue is that my image is larger than the modal container as well as the viewport. I want it that way with the scroll bars so the user can just use their finger to move around and examine the full size image, no need to pinch/zoom.
Because the image is larger though, I am having trouble centering it. No matter what CSS centering tricks I try, it always loads at the top left of the image.
The 2nd problem is focus not being properly trapped in the modal.
When I am scrolling through the high res image, sometimes there is a glitch where the user interacts with the area behind the modal? I notice it when I quickly scroll downwards. Sometimes the fixed footer menu will appear.
I used this tutorial
https://css-tricks.com/considerations-styling-modal/
and am utilizing the overlay which I thought would prevent interaction with elements behind the modal, but like I said I still encounter the issue of the fixed footer appearing sometimes.
Any advice regarding this would be greatly appreciated!
