Ticket ID: 21834 Creation Date: 7/23/2015 10:08 AM Product: SiteKiosk Classic Windows Attachment: -
TicketType: Support Request Version: 8.91.3042 Language: English
Views: 38427 Last Modification Date: 8/21/2015 4:56 PM Platform: Windows
Level: Closed IE: 11.0
Bug Status: Not Fixed User account: SiteKiosk Restricted User Bug Frequency: On every start

Support Request: Webbrowser touch-scroll not working when mousedown event is assigned

Reproduction

Include the following code in javascript: 


$(document).on('mousedown', function() { });

Description

When the mousedown event is assigned on the document or body in javascript the touch scrolling doesn't work. I've tested in different browsers and this problem only occurs in the sitekiosk browser.

Without this line of javascript code I can scroll the page with my finger on a touch screen, with this line of code active I can only select text in the page: 


$(document).on('mousedown', function() { });

Answer: (4)
Re: Webbrowser touch-scroll not working when mousedown event is assigned 7/23/2015 1:36 PM
Hello,

that claim is not reproducible. Using the test code from here https://api.jquery.com/mousedown/ (with added text to make the page long enough for scrolling) with a default SiteKiosk configuration does not stop using touch to scroll through a page.
Re: Webbrowser touch-scroll not working when mousedown event is assigned in combination with iscroll.js 7/24/2015 2:50 PM
I have to admit my report was not complete, my excuses. We have tested in our website where the removal of the event resulted in the normal working of the scrolling and I assumed that the problem was located. I have now done further research and came to the following results:

- The problem only occures when using the IScroll javascript: http://cubiq.org/iscroll-5
- Both mousedown and mousewheel events should be assigned.

Here is the page code that reproduces the problem. As said before the problem does not exists in IE11, Firefox or Chrome, only the Sitekiosk browser. 


<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Touch scroll</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- IScroll5 from http://cubiq.org/iscroll-5 -->
<script type="text/javascript" src="/iscroll.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
  var TestScroller = new IScroll($('.scroll')[0],{});

  $(document).on('mousedown mousewheel', function(e){ });
});
</script>
<style>
  html {
    overflow: auto;
  }
  .main {
    height: 1200px;
    border: 2px solid red;
  }
</style>
</head>
<body>
  <div class="main">
    <h1>Header</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1>Header</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1>Header</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1>Header</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <ul class="scroll">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
      <li>test4</li>
    </ul>
  </div>
</body>
</html>
Re: Webbrowser touch-scroll not working when mousedown event is assigned 7/24/2015 3:21 PM
Hello,
whatever that script is doing, it is doing something that is not compatible with the public part of the Microsoft WebBrowser Control as provided by Microsoft. You can find more details and a small test application that is just the WebBrowser Control without any SiteKiosk additions here: http://www.provisio.com/Download/Webbrowser%20Control%20Test%20Applikation%20en.pdf. The test application shows the same behavior.

If you are having a scenario where you can also use a fullscreen browser you can switch to the new SiteKiosk Chrome Fullscreen browser which supports that script and is available in SiteKiosk 8.91. Browserskins will be added to the Chrome-based browser with future SiteKiosk updates.

If possible you might also switch to another script framework.
Re: Webbrowser touch-scroll not working when mousedown event is assigned 7/24/2015 4:49 PM
Thanks for your advice. I'll try to contact the creator of the iScroll script to report the issue there. And we will use a workaround in the website for now.
My Account
Login
Language (Tickets):