Unable to disable bounce in a html with Swiffy object

789 Views Asked by At

i have a html file converted by swiffy that looks like this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy output</title>
    <script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <script>
        function stopScrolling( touchEvent ) { alert("wa");touchEvent.preventDefault(); }
        document.addEventListener('touchstart', stopScrolling , false );
        document.addEventListener('touchmove', stopScrolling , false );
    </script>
    <script>
      swiffyobject = ...........
    </script>
    <style>html, body {width: 100%; height: 100%}</style>
  </head>

  <body style="margin: 0;">
    <div id="swiffycontainer" style="width: 100%; height: 100%">
    </div>
    <script>
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);

      stage.start();
    </script>
  </body>
</html>

When view this page in iPhone, the website keeps bouncing in Safari and prevents me from doing more advanced touch detection.

I searched on stackoverflow and most answers suggested the same thing: listen to touchstart/touchmove and call preventDefault.

As shown above i have implemented tat but it doesnt seem to be working at all.

Any help? How can I prevents the bouncing in safari?

1

There are 1 best solutions below

0
On

// After stage.start(); insert the below code.

var timer = setInterval(noBounce, 1000);
function noBounce(){
    if($("#swiffycontainer svg").length > 0){
        $("#swiffycontainer").children().on('touchmove', function(event){
            event.preventDefault();return false;
        });  
    clearInterval(timer);
    }
}