Project: titanium
Issue TIMOB-23477: iOS: ScrollableView with embedded ScrollView freezes after zooming the scrollview
Seen on iOS only We're attempting to replicate the photo-viewing experience of the native photos app. We use a ScrollableView, with embedded ScrollViews, each with an image so that the user can swipe between photos, then pinch-to-zoom on the photos. We reset the zoom scale to 1 if the user swipes to the next/previous photo. However, we have found the ScrollableView freezes randomly. Using the sample code below, you can reproduce with the following steps: # Swipe forward a photo or two # Pinch to zoom in # Swipe back to the previous photos (aka, to the left) # Swipe forward / right # Not every time, but frequently the ScrollableView is now stuck. You can't swipe to the next or previous image in the set. The view bounces a bit, but won't scroll. No log output or errors are seen in the console. It's as if the ScrollableView no longer receives the swipe gesture. Zooming in then out "un-sticks" it, which is not reasonable to expect our users to discover. # If it doesn't freeze, repeat the steps above. It sometimes freezes if you swipe forward (to the right) after zooming a photo also. {code} var currentPage = 0, deviceWidth = Ti.Platform.displayCaps.platformWidth; var win = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#000', navBarHidden: true, fullscreen: true }); var sav = Ti.UI.createScrollableView(); win.add(sav); var photos = [ "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/AL1VP9Ng5N.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/4xdHX5gCpF.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/3T0ZeAED7m.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/D6imFFILV8.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/hn5Ia8Zvof.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/6BcuYSToU9.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/DpQlIzHfE1.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/l0TndCtDnf.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/tVq0HjMPBh.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/9CKlRimn_G.jpg", "https://s3.amazonaws.com/static-uat.acvauctions.com/vehicle_photos/auekHpHf1Z.jpg" ]; photos.forEach(function (picURL) { var zoomView = Ti.UI.createScrollView({ height: Ti.UI.FILL, width: Ti.UI.FILL, zoomScale: 1, maxZoomScale: 5, minZoomScale: 1, contentHeight: Ti.UI.SIZE, contentWidth: Ti.UI.SIZE, top: 0, left: 0, disableBounce: false, backgroundColor: 'black' }); zoomView.add(Ti.UI.createImageView({ image: picURL, width: deviceWidth, height: deviceWidth, left: 0 })); sav.addView(zoomView); }); function onScroll(event) { if (!event || isNaN(event.currentPage)) { console.log('no event / currentPage'); return; } currentPage = event.currentPage; if (sav.views[currentPage - 1]) { resetZoom(currentPage - 1); } if (sav.views[currentPage + 1]) { resetZoom(currentPage + 1); } } sav.addEventListener("scrollend", onScroll); sav.addEventListener("doubletap", function () { resetZoom(currentPage); }); function resetZoom(pageNum) { if (sav.views[pageNum].apiName === "Ti.UI.ScrollView" && sav.views[pageNum].zoomScale !== 1) { sav.views[pageNum].zoomScale = 1; } } win.open(); {code}
Story points: 5