After pinch to zoom, picture snaps back to full size

67 views
Skip to first unread message

Steve Husting

unread,
Apr 15, 2014, 4:28:42 PM4/15/14
to isc...@googlegroups.com
I can use two fingers to diminish the size of an image, but when I let go, the image snaps back to the original size (beyond the boundaries of the device). Can anyone explains why this is? My code portions: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0">
[I've tried several different variations of this, including minimum scale of 0.1, 1.0, and leaving it off. ]

------------------------------------------

<script type="text/javascript" src="js/iscroll-zoom.js"></script>
[including iscroll.js has no effect.]

------------------------------------------

<style type="text/css">
body {
padding:0;margin:0; background-color: #000;
overflow: hidden; /* this is important to prevent the whole page from bouncing */
}
#wrapper {
position: relative;
width: 100%; 
height: 100%;
overflow: visible;

/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

/* Prevent text resize on orientation change, useful for web-apps
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none; */
}

#scroller {
position: absolute;

/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);

/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

#scroller li {
padding: 0;
}

</style>

------------------------------------------

<script>

var myScroll;
function loaded() { // http://iscrolljs.com/
myScroll = new IScroll('#wrapper', {
zoom: true,
scrollbars: false,
scrollX: true,
scrollY: true,
tap: true
});
}

function returnTo() {
// myScroll.destroy(); //remove this to make return work.
// myScroll = null;
window.location="index.html";
}

</script>

------------------------------------------

<body onload="loaded()">
<div id="output"></div>
<div id='wrapper'><div id='scroller'><ul><li><a href='#' onclick='returnTo()'><img src='wallpaper.jpg'></a></li></ul></div></div>;
</body>

Steve Husting

unread,
Apr 15, 2014, 5:53:33 PM4/15/14
to isc...@googlegroups.com
I answered this with:

function loaded() { // http://iscrolljs.com/
myScroll = new IScroll('#wrapper', {
zoom: true,
zoomMin: 0.1,
scrollbars: false,
scrollX: true,
scrollY: true,
tap: true,
HWCompositing: false
});
Reply all
Reply to author
Forward
0 new messages