Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem:
<ons-template id="test.html" style="display:none;">
<ons-page>
<ons-toolbar style="background-color:#FF9500;">
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Main AK</div>
</ons-toolbar>
<div class="center">
<ons-scroller>
<ons-button modifier="food_folder" onclick="">Type A</ons-button>
<button class="button button--cta" style=" width:100px; z-index:1000;" >Test</button> -->
</ons-scroller>
</div>
<ons-tabbar>
<ons-button icon="ion-ios-checkmark" modifier="navi_button" onclick="">SAVE</ons-button>
<ons-button icon="ion-ios-checkmark" modifier="chk_button" onclick="">
<div><span class="notification">1</span></div>
Latte
</ons-button>
</ons-tabbar>
</ons-page>
</ons-template>
The buttons worked fine in the browser, but on iOS devices, they were unresponsive due to overlapping layers. Removing the ons-scroller fixed the issue, but I needed a solution for scrollable content on iPhones with multiple buttons.
Has anyone else experienced this problem and found a solution? Thank you.