Page will not scroll vertically when swiping up down on an image using mobile device

Question

I am experiencing an issue when swiping on an image vertically up/down it will not allow me to scroll up and down the page on mobile devices. This is a local project I am working on that is not on the inte.net. Is there any CSS or Javascript I can write to stop this from happening? Like can I add some css/javascript to the div that wraps that image so that it allows me to scroll normally? Or to the img tag itself?

Detailed Example below.

I have a product detail page for an ecommerce site. When you are using a mobile device and try to scroll up and down that page to see all the product info, swiping your finger on the actual main product image itself does not do anything, it does not let you keep scrolling if you do it on the actual image. You have so just swipe on everything else on the page but the image. Its supposed to allow you to continue to scroll up/down the page like when you vertically swipe/scroll your finger on white space on the page.

 <div class="zoompro-span">    
      <div>                                           
           <img class="blur-up lazyload zoompro" data-zoom-image="@Model.ProductDetailPageMainImage" alt="" src="@Model.ProductDetailPageMainImage" />
       </div>                                            
 </div>

Scrolling works fine when you scroll on desktop with a mouse. Mobile is the one that creates this issue. For some reason it will not let you scroll when you take your finger and swipe up or down that image.

The section where the image is called, is using a class (zoompro-span) that came with the template/theme. I have removed those classes to test what happens and still get the same results. So I just need some javascript that will allow me to scroll when I am on mobile and decide to swipe with my finger on that image up and down.

Note: This is something I am writing in asp.net MVC. But the views such as the page I am having issues with have your usual html, css and javascript for the front end.

Update: When I hard code the image path onto the code, the mobile scroll actually works. But when I am calling the image from a model, the image scroll does not work at all in mobile. See code below of comparison between hard coding and calling from model.

 <div class="zoompro-span">    
  <div>                                           
   <img class="blur-up lazyload zoompro" 
data-zoom-image="~/Content/Diva2/Html-Package- 
v1.0/assets/images/product-detail-page/product-large_1000x1280.jpg" 
alt=""                                                  
src="~/Content/Diva2/Html-Package-v1.0/assets/images/product-detail- 
page/product-large_1000x1280.jpg" />   
  </div>                                            
 </div>


                                           


<div class="zoompro-span">    
  <div>                                           
   <img class="blur-up lazyload zoompro"
data-zoom-image=@Model.ProductDetailPageImage alt=""                                                 
src="@Model.ProductDetailPageImage" />   
  </div>                                            
 </div>     

CSS Code for the image. I hit inspect element and have tried editing all of these fields but continue to get the same result... No scrolling or swiping through that image when using a mobile device.

element.style {
z-index: 999;
overflow: hidden;
margin-left: 0px;
margin-top: 0px;
background-position: -338.281px -338.281px;
width: 461.719px;
height: 461.719px;
float: left;
cursor: crosshair;
background-repeat: no-repeat;
position: absolute;
background-image: url(https://cdn.pingly.com/s/files/7/5051/1457/2000/files/Wall_Vase.jpg?v=635021551);
top: 0px;
left: 0px;
display: none;

}

Answer 1

I was able to solve this. Not sure if it was the best solution for SEO but I solved it by doing the following.

I added a random static image to the page from the code and made that image opacity as 0 so that it is invisible/transparent. Then I took the dynamic image call from the database and placed it behind the static image. This way since the scroll only works when the image is static for some unknown reason, when you swipe with your finger on the image place holder, you are technically swiping that invisible static image instead of the real product image you want the users to see.

This was done by making the CSS so that the static image is position absolute and opacity 0. Then make the dynamic image as position relative.

I am not sure if this will hurt the seo because when google crawls the page, I don't know if it will see the invisible image and index that invisible image instead of the real one. Not really sure if the crawler can see images that are set to not visible.