Disable dragging and zoom events on app images

Events triggered by webapps on those actions were producing
some race conditions eventually causing a freeze.
So disabling those and hiding displaying draggable link.

Bug-AGL: SPEC-3786

Signed-off-by: Lorenzo Tilve <ltilve@igalia.com>
Change-Id: I64485b93077e1205fcd6d43ffa352b6a162db8fa

diff --git a/src/index.html b/src/index.html
index 5dac7c5..5095354 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -31,14 +31,14 @@
                     <div class="label">
                         {{ name }}: <span class="value"> {{ value }}%</span>
                     </div>
-                    <a href="#" class="button" onclick="window.decrease(this);">
+                    <a class="button" onclick="window.decrease(this);">
                         <span class="icon-volume-decrease"></span>
                     </a>
                     <div class="slider">
                         <input type="range" min="1" value="{{ value }}" max="100" oninput="window.change(this);">
                         <progress value="{{ value }}" max="100"></progress>
                     </div>
-                    <a href="#" class="button" onclick="window.increase(this);">
+                    <a class="button" onclick="window.increase(this);">
                         <span class="icon-volume-increase"></span>
                     </a>
                 </div>
@@ -48,4 +48,4 @@
 
         </div>
     </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 8f388c9..d45f2bb 100644 (file)
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -53,6 +53,13 @@ html {
     height: 100%;
     background-size: cover;
     -webkit-overflow-scrolling: touch;
+    user-select: none;
+}
+
+img {
+    user-select: none !important;
+    touch-action: none;
+    pointer-events: none;
 }
 
 body {
@@ -143,4 +150,4 @@ body {
         background: white;
         font-size: 1.5rem;
     }
-}
\ No newline at end of file
+}