Scrolling down breaks links and buttons click detection

1

Hi everybody.

I have three links and one button on my app, I can perfectly click on any of them if I am on the top of the page, but when I scroll down (on android using ionic view, it’s ok in desk browser) I can’t click on any of them, well, to be honest I can, but I have to touch some pixels below in order to make it work, it feels like the content scrolls but the buttons “collision box” its in the same place as before.

For example. On the top, if I click the “English Flag”, its ok, it works fine:

image
Screenshot_2016-01-09-02-22-35.png480×800 129 KB

If I scroll down, and then click the same flag (English), the flag at the top gets selected (Spanish). I have to touch the French flag in order to select English, the green button to select French, and the blank space below to fire the green button.

image
Screenshot_2016-01-09-02-23-19.png480×800 86.4 KB

Also, scrolling fells a little buggy, it feels like it stops when reaches the middle of the green button and you have to scroll again in order to reach the end of the page (also a strange gray line appears, as it shows in the second screenshot).

I have a very basic markup. At body:

<body ng-app="starter">

      <ion-nav-view></ion-nav-view>

</body>

The view’s template (inside ion-view -> ion-content tags)

      <h1><img src="img/logo.png" alt="Alphalingo!"></h1>
      
      <p id="welcome-desc">{{messages[selectedLang].welcome}}</p>
      
      <div class="row responsive-sm" id="welcome-lang">
          
        <div class="col">
            <a ng-class="{'welcome-lang-flag-active':selectedLang === 'es'}" ng-click="selectedLang = 'es'" href="#spanish" class="welcome-lang-flag"><img src="img/espania.png" alt="Español"/></a>    
        </div>
          
          
       <div class="col">
            <a ng-class="{'welcome-lang-flag-active':selectedLang === 'en'}" ng-click="selectedLang = 'en'" href="#english" class="welcome-lang-flag"><img src="img/reino_unido.png" alt="English"/></a>    
        </div>
          
          
        <div class="col">
            <a ng-class="{'welcome-lang-flag-active':selectedLang === 'fr'}" ng-click="selectedLang = 'fr'" href="#french" class="welcome-lang-flag"><img src="img/francia.png" alt="Francais"/></a>    
        </div>
      
      </div>
  
<button class="button button-large button-balanced" ng-click="comenzar()">{{messages[selectedLang].action}}</button>

Does anybody have experience this kind of issue when scrolling? Any ideas?

APPID if you would like to test it yourself on Ionic View: f6a38a49.

Thank you guys!