overflow:scroll hidden; property with position absolute is not working on Iphone

Question

I have horizontal search bar with many input fields and these are working correctly at desktop and at mobile view but in Iphone this is not working and I think it is because of overflow:scroll hidden; property. Any suggestion regarding this will be appreciated as I spent a lot of time and tried many things but could not fix this.

I tried this property "-webkit-overflow-scrolling:touch;" but even this one is not working. I also tried different viewport meta but nothing is working for this.

This is my CSS for external div which I am using for mobile view.

#searchBoxout{ 
-webkit-overflow-scrolling:touch; 
width:100%; 
float:left; 
position:absolute; 
top:0; 
overflow:scroll hidden; 
height:55px;
left:75px;
}
#searchBoxout ul.newsearchTopbox{
white-space: nowrap;
}

Here is minimal html code.

<form method="POST" name="home_search" id="home_search" autocomplete="off">
 <label style="padding:0px;" class="fixleftPriceLab"></label>                    
 <div id="searchBoxout" style="left:0px; width:100%;">
    <ul class="sale-boxmain newsearchTopbox">
       <li class="sale-box sale-box1">
         <div class="form-box">
           <input type="hidden" name="pmls" id="pmls" value="0" /> 
         </div>
       </li>
       .
       .
       .
    </ul>
 </div>
</form>

Answer 1

Instead of overflow:scroll hidden; could you please try with overflow-y:scroll. Also you can test if the events are triggering on touch/click, if not please trigger and try.

Answer 2

I replace overflow:scroll hidden; with overflow:hidden; and overflow-x:scroll; and it start to work for me in Iphone and in safari browser. Strange issue but this trick works for me. I posted this answer because I think it will help others.

#searchBoxout{ 
-webkit-overflow-scrolling:touch; 
overflow:hidden; 
overflow-x:scroll; 
width:100%; 
float:left;
position:absolute; 
top:0; 
height:55px; 
left:75px;
}