[TIMOB-24491] iOS: Webview scroll doesn't work inside a view with "onClick" in the xml

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Duplicate
Resolution Date	2017-03-23T11:59:12.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	n/a
Reporter	David Benko
Assignee	Vijay Singh
Created	2017-03-16T16:23:04.000+0000
Updated	2017-03-31T22:50:00.000+0000

Description

*Expected behaviour:* The webview should display a vertical scrollbar and let the user scroll through the content *Current behavior:* No scroll bar is show and its not possible to scroll the webview. But if you remove this from the xml: onClick="ClickView" The scroll bar will appear on the webview and everything will function normally

<Alloy>
	<Window id="Window">
		<View id="View" onClick="ClickView">
			<WebView id="WebView" />
		</View>
	</Window>
</Alloy>

"#View": {
	layout: "vertical",
	width: "100%",
	height: "100%"
}

"#WebView": {
	width : '300dp',
	height: '300dp',
	url: '/test.html'
}

setTimeout(function() {
	Ti.App.fireEvent('setcontent', { content: randomString(2000) } );
}, 3000);

function ClickView() {

}

$.Window.open();

function randomString(len, charSet) {
    charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789           ';
    var randomString = '';
    for (var i = 0; i < len; i++) {
        var randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz,randomPoz+1);
    }
    return randomString;
}

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        body {
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
			color: #1e3f68;
			margin: 0;
			font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
            }
		p {
			padding: 5px;
			text-align: justify;
			font-size:18px;
			margin: 0;
		}
    </style>
</head>
<body>
	<div id="content"></div>
	<script>
		if (typeof Ti !== 'undefined') {
			Ti.App.addEventListener('setcontent', function(e) {

				SetContent(e);
			});
		}

		function SetContent(e) {

			var content = e.content;

			var div = document.getElementById("content");

			div.innerHTML = content;
			window.scrollTo(0,0);
		}
	</script>
</body>
</html>

Attachments

File	Date	Size
test.html	2017-03-23T08:58:06.000+0000	931

Comments

Sharif AbuDarda 2017-03-16

I can verify the issue for iOS. Webview scroll doesn't show if it's, inside a view with a click event. [~hansknoechel], any thoughts. This seems to be a bug. Or am I missing something?

Vijay Singh 2017-03-23

Simple app for debugging -

   var window = Titanium.UI.createWindow({
       backgroundColor: 'white'
   });
   window.addEventListener('click', function(e) {
       alert('Window clicked');
   });
    
   var webView = Titanium.UI.createWebView({
       url:'/test.html'
   });
   webView.addEventListener('click', function(e) {
       alert('WebView Clicked');
   });
       
   
   setTimeout(function() {
       Ti.App.fireEvent('setcontent', { content: randomString(2000) } );
   }, 3000);
    
    
   function randomString(len, charSet) {
       charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789           ';
       var randomString = '';
       for (var i = 0; i < len; i++) {
           var randomPoz = Math.floor(Math.random() * charSet.length);
           randomString += charSet.substring(randomPoz,randomPoz+1);
       }
       return randomString;
   }
    
   window.add(webView);
   window.open();

Vijay Singh 2017-03-23

The cause of this issue is same as that of TIMOB-19924. When we try to scroll hitTest method of TIUIWebView called.
Lee Morris 2017-03-31

Closing ticket as duplicate, the relevant ticket is linked above.

JSON Source