WebView not working in Release mode!

Ovidiu Vasilca

I have a page in an application, with a WebView component. WebView.url is an .html file. There is a Signature pad and the user draws his signature.

It worked well untill the last update of Qt. Since the update, this is not working anymore in RELEASE mode. (in DEBUG mode it works well).

SGaist

Hi,

What version of Qt is it exactly ?
On what OS ?
Do you get any warning ?
Can you share a minimal sample code that reproduces this ?

Ovidiu Vasilca

Hi SGaist,

I use Qt 5.11.1 on mac os.
I don't get any warning related to my issue.
(In the meanwhile, i developed another solution for signature functionality, with Canvas and MouseArea.)
In the following, i will present the problem:

I have, somewhere in code, a WebView like:

WebView {
                id: webView
                Component.onCompleted: {
                    webView.onLoadingChanged.connect(loadingChanged);
                    webView.url = "qrc:/Html/Canvas/" + "Canvas.html";
                }

                function loadingChanged(loadRequest){
                    if (loadRequest.status == WebView.LoadSucceededStatus){
                        console.log("Page loaded!");
                    }
                }
            }

File Canvas.html contains:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Signature Pad demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="signature_pad.css">
</head>
<body scroll="no">
  <div id="signature-pad" class="m-signature-pad">
      <canvas></canvas>
  </div>
  <script src="signature_pad.js"></script>
  <script src="app.js"></script>
</body>
</html>

signature_pad.css file is:

html, body, canvas {
    width: 100% !important;
    height: 100% !important;
}
.m-signature-pad {
        height: 100%;
}

signature_pad.js file is contains a lot of functions (i will put here a part of it):

(function (global, factory) {
    (typeof exports === 'object' && typeof module !== 'undefined') ? module.exports = factory() :
    ((typeof define === 'function' && define.amd) ? define(factory) :
    (global.SignaturePad = factory()));
}(this, (function () {
    'use strict';
...
function SignaturePad (canvas, options) {
        var self = this;
        var opts = options || {};
...
        this._canvas = canvas;
        this._ctx = canvas.getContext('2d');
        this.clear();
        this._handleMouseDown = function (event) {
            console.log("_handleMouseDown");
            event.preventDefault();
            if (event.which === 1) {
                self._mouseButtonDown = true;
                self._strokeBegin(event);
            }
            return false;
        };

        this._handleMouseMove = function (event) {
            event.preventDefault();
            if (self._mouseButtonDown) {
                self._strokeUpdate(event);
            }
            return false;
        };

        this._handleMouseUp = function (event) {
            event.preventDefault();
            if (event.which === 1 && self._mouseButtonDown) {
                self._mouseButtonDown = false;
                self._strokeEnd(event);
            }
            return false;
        };

        this._handleTouchStart = function (event) {
            event.preventDefault();
            if (event.targetTouches.length === 1) {
                var touch = event.changedTouches[0];
                self._strokeBegin(touch);
            }
            return false;
        };

        this._handleTouchMove = function (event) {
            // Prevent scrolling.
            event.preventDefault();

            var touch = event.targetTouches[0];
            self._strokeUpdate(touch);
            return false;
        };

        this._handleTouchEnd = function (event) {
            var wasCanvasTouched = event.target === self._canvas;
            if (wasCanvasTouched) {
                event.preventDefault();
                self._strokeEnd(event);
            }
            return false;
        };
        // Enable mouse and touch event handlers
        this.on();
    }
...// + methods description

app.js is like:

var wrapper = document.getElementById("signature-pad"),
    canvas = wrapper.querySelector("canvas"),
    el = canvas,
    signaturePad;
function resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
	resizeCanvas();
signaturePad = new SignaturePad(canvas);
function save(){
	return signaturePad.toDataURL();
}
function clear(){
	signaturePad.clear();
}

All these worked fine before i updated my Qt.

Ovidiu Vasilca

I made a test in RELEASE mode setting SignaturePad's background color to "red" and that didn't work. (in debug mode it worked).
That was like " signaturePad = new SignaturePad(canvas); " from app.js didn't work.

SGaist

Would it be possible to share the complete project through e.g. Gitlab, Bitbucket or another way ?

Unsolved WebView not working in Release mode!