Demo
Google Apps Script web application
Environment
- Samsung Galaxy Tab A
- Google Apps Script web application
- Chrome 60.0.3112.116
- Android 7.0.0
- Device SM-P585Y Build/NRD90M
Steps To Reproduce
Click on the "Pen" menu icon with your stylus on the tablet model above and the app will crash (the Google Chrome "Aw, Snap!" message).
Bug Description
I thought this bug was related to jQuery UI autocomplete where if I used my finger to scroll up and down on the results, there was no problem, but as soon as I used the stylus on the results the app crashed. I've since removed that library and the bug still exists. Additionally, I can now reproduce it by clicking on a menu link with the stylus.
What I've Tried
I replaced jQuery UI with another autocomplete and the bug was still there.
I built a new version of the app, hoping the crash issue would be resolved by coding lighter. I used the UIkit (getuikit.com) CSS framework (which was not used before) and encountered the bug again - this time when clicking on a menu item.
The app does not crash if I use my finger - only if I use the stylus.
If I reproduce the code in a codepen (full screen view | editor view ) the app does not crash when using the stylus to click on the menu item.
It therefore seems to be a combination of the stylus and the google apps script environment.
I have stripped the web application down to the Code.gs file which only contains the following:
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().setTitle("DUPLICATE FOR REPRODUCING BUGS");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
and:
- index.html (which contains very little HTML, see codepen or below)
- jQuery 3.2.1 minified
- UIKit js and css files
When I click on the menu link with the stylus, the app still crashes.
Edit:
As requested, index.html from the web app is below - but I think it might not be relevant as the bug has persisted across a complete rewrite of the HTML:
<!DOCTYPE html>
<html>
<head>
<title>DUPLICATE FOR REPRODUCING BUGS</title>
<?!= include('css_custom_common'); ?>
</head>
<body>
<div class="uk-flex uk-height-viewport mini_site_container">
<div id="site_overlay" class="uk-overlay-primary uk-position-cover" style="
z-index: 2; display: none; background: rgba(16, 30, 100, 0.8) !important;
"></div>
<div class="uk-width-auto">
<div class="uk-background-primary uk-height-1-1">
<ul class="uk-iconnav uk-iconnav-vertical uk-margin-remove-top">
<li title="Test" uk-tooltip="pos: right" class="iconnav-item-color iconnav-item-hover-color uk-padding-remove-vertical">
<a data-content-name="test" class="uk-padding-small" href="#" uk-icon="icon: pencil; ratio: 1.3"></a>
</li>
</ul>
</div>
</div>
<div class="uk-width-expand">
<div class="uk-background-default uk-height-1-1 my_right_content_area uk-inline uk-width-1-1">
<img class="uk-logo uk-position-top-right" src="" alt="">
<p class="page_heading"></p>
<div class="my_dynamic_content uk-padding-small">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>
</body>
</html>
