Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-85536

WebAssembly qdeclarative -- double tapping on the canvas with mobile device causes screen to become locked / zoomed in permenantly in some situations

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: P2: Important
    • Resolution: Unresolved
    • Affects Version/s: 5.15.0
    • Fix Version/s: None
    • Labels:
      None
    • Environment:
    • Platform/s:
      WebAssembly

      Description

      In certain situations, tapping on the rendered canvas generated by emscripten's compiler output  can cause the screen to become zoomed in and then stuck that way. 

      This happens under mobile devices under google chrome for mobile 

       

      Attachments not working on bug tracker, however the code is simple enough.

       

       

      Main.qml


       

      import QtQuick 2.13
      import QtQuick.Window 2.13
       
      import QtQuick 2.13
      import QtQuick.Window 2.13Window {
          visible: true    title: qsTr("Hello World")
          width: 1600
          height: 900
          Rectangle {
              id: logoContainer
              width: parent.width
              color: "black"
              height: parent.height * 0.35
              MainMenu {
                  anchors.fill: parent
              }
          }
          Timer {
              running: true
              repeat: false
              interval: 10000
              onTriggered: {
                  presentationImage.opacity = 1.0
              }
          }
          Rectangle {        id: presentationContainer
              width: parent.width
              color: "black"
              height: parent.height * 0.65
              anchors.top: logoContainer.bottom
              Image {
                  opacity: 0.1
                  source: "qrc:///images/5f07ab12d3972/presentation_01_header_text_gfx.svg.png"
                  anchors.fill: parent
                  id: presentationImage
                  Behavior on opacity {
                      NumberAnimation {                    duration: 4000
                      }
                  }
              }
          }
      }/*##^##
      Designer {
          D{i:0;formeditorZoom:2}
      }
      ##^##*/
       
      

       

       

      MainMenu.qml


       

       
      import QtQuick 2.15
      import QtQuick.Controls 2.12
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.2
      import QtQuick.Particles 2.0Item {
          id: menuRoot    signal startLocalGame
          anchors.fill: parent
          Component.onCompleted: {
              logoRoot.opacity = 0.9
          }
          Image {
              id: logoRoot
              source: "qrc:///images/dflogo3-1.png"
              width: parent.width
              height: parent.height
              anchors.top: parent.top
              scale: 1.0
              opacity: 0.1
              z: 10
          }
        
          function generate_path_from_pct_array(targetItem, pctArray) {
              var rv = "M "
              for (var i = 0; i < pctArray.length; i++) {
                  var obj = pctArray[i]
                  var objx = mapToItem(targetItem, targetItem.width * obj.x,
                                       targetItem.height * obj.y).x
                  var objy = mapToItem(targetItem, targetItem.width * obj.x,
                                       targetItem.height * obj.y).y
                  rv += objx + " " + objy
                  if ((i + 1) < pctArray.length) {
                      rv += " L "
                  }
              }
              return rv
          }
          ParticleSystem {
              id: ps
              anchors.fill: parent
              scale: 1
              z: 150
              transformOrigin: Item.Center
          }    property var particles: []
          function create_block_particle(xpos, ypos) {
              var obj = particleComponent.createObject(menuRoot, {
                                                           "x": xpos,
                                                           "y": ypos
                                                       })
              particles.push(obj)
              obj.running = true
          }    property var sparkAnimationPoints: [{
                  "x": 0.5861538461538461,
                  "y": 0.09473684210526316
              }, {
                  "x": 0.5961538461538461,
                  "y": 0.10789473684210527
              }, {
                  "x": 0.5992307692307692,
                  "y": 0.10789473684210527
              }, {
                  "x": 0.61,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.6146153846153846,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.6153846153846154,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.6284615384615385,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.6492307692307693,
                  "y": 0.09210526315789473
              }, {
                  "x": 0.6492307692307693,
                  "y": 0.09210526315789473
              }, {
                  "x": 0.6615384615384615,
                  "y": 0.08947368421052632
              }, {
                  "x": 0.6638461538461539,
                  "y": 0.08947368421052632
              }, {
                  "x": 0.686923076923077,
                  "y": 0.08947368421052632
              }, {
                  "x": 0.703076923076923,
                  "y": 0.0868421052631579
              }, {
                  "x": 0.7169230769230769,
                  "y": 0.0868421052631579
              }, {
                  "x": 0.7346153846153847,
                  "y": 0.1
              }, {
                  "x": 0.7661538461538462,
                  "y": 0.11315789473684211
              }, {
                  "x": 0.7715384615384615,
                  "y": 0.11315789473684211
              }, {
                  "x": 0.8084615384615385,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.8638461538461538,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.8746153846153846,
                  "y": 0.09736842105263158
              }, {
                  "x": 0.89,
                  "y": 0.1
              }, {
                  "x": 0.89,
                  "y": 0.1
              }, {
                  "x": 0.9,
                  "y": 0.1
              }, {
                  "x": 0.9115384615384615,
                  "y": 0.1
              }, {
                  "x": 0.926923076923077,
                  "y": 0.10263157894736842
              }, {
                  "x": 0.9276923076923077,
                  "y": 0.10263157894736842
              }, {
                  "x": 0.9553846153846154,
                  "y": 0.15263157894736842
              }, {
                  "x": 0.9561538461538461,
                  "y": 0.15263157894736842
              }, {
                  "x": 0.9661538461538461,
                  "y": 0.1763157894736842
              }, {
                  "x": 0.9746153846153847,
                  "y": 0.2
              }, {
                  "x": 0.9815384615384616,
                  "y": 0.22894736842105262
              }, {
                  "x": 0.9853846153846154,
                  "y": 0.26052631578947366
              }, {
                  "x": 0.9876923076923076,
                  "y": 0.2789473684210526
              }, {
                  "x": 0.9876923076923076,
                  "y": 0.29473684210526313
              }, {
                  "x": 0.9930769230769231,
                  "y": 0.3394736842105263
              }, {
                  "x": 0.9930769230769231,
                  "y": 0.3473684210526316
              }, {
                  "x": 0.9868624420401855,
                  "y": 0.5447368421052632
              }, {
                  "x": 0.9799072642967542,
                  "y": 0.5763157894736842
              }, {
                  "x": 0.9799072642967542,
                  "y": 0.5763157894736842
              }, {
                  "x": 0.955177743431221,
                  "y": 0.631578947368421
              }, {
                  "x": 0.9404945904173106,
                  "y": 0.6473684210526316
              }, {
                  "x": 0.9358578052550232,
                  "y": 0.6657894736842105
              }, {
                  "x": 0.9064914992272025,
                  "y": 0.7105263157894737
              }, {
                  "x": 0.9057187017001546,
                  "y": 0.7052631578947368
              }, {
                  "x": 0.8608964451313755,
                  "y": 0.6894736842105263
              }, {
                  "x": 0.8253477588871716,
                  "y": 0.6894736842105263
              }, {
                  "x": 0.7998454404945904,
                  "y": 0.6894736842105263
              }, {
                  "x": 0.7782071097372488,
                  "y": 0.6894736842105263
              }, {
                  "x": 0.749613601236476,
                  "y": 0.7026315789473684
              }, {
                  "x": 0.741112828438949,
                  "y": 0.7026315789473684
              }, {
                  "x": 0.7109737248840804,
                  "y": 0.7078947368421052
              }, {
                  "x": 0.6955177743431221,
                  "y": 0.7105263157894737
              }, {
                  "x": 0.6530139103554868,
                  "y": 0.7078947368421052
              }, {
                  "x": 0.6506955177743431,
                  "y": 0.7078947368421052
              }, {
                  "x": 0.6136012364760433,
                  "y": 0.6947368421052632
              }, {
                  "x": 0.58887171561051,
                  "y": 0.6894736842105263
              }, {
                  "x": 0.5710973724884081,
                  "y": 0.6815789473684211
              }, {
                  "x": 0.5548686244204019,
                  "y": 0.7
              }, {
                  "x": 0.5525502318392581,
                  "y": 0.7
              }, {
                  "x": 0.5015455950540958,
                  "y": 0.7
              }, {
                  "x": 0.4992272024729521,
                  "y": 0.7
              }, {
                  "x": 0.47836166924265844,
                  "y": 0.6842105263157895
              }, {
                  "x": 0.46445131375579596,
                  "y": 0.6789473684210526
              }, {
                  "x": 0.4598145285935085,
                  "y": 0.6789473684210526
              }, {
                  "x": 0.4420401854714065,
                  "y": 0.6842105263157895
              }, {
                  "x": 0.4234930448222566,
                  "y": 0.6921052631578948
              }, {
                  "x": 0.4026275115919629,
                  "y": 0.6921052631578948
              }, {
                  "x": 0.3894899536321484,
                  "y": 0.6921052631578948
              }, {
                  "x": 0.3856259659969088,
                  "y": 0.6921052631578948
              }, {
                  "x": 0.3786707882534776,
                  "y": 0.6921052631578948
              }, {
                  "x": 0.3516228748068006,
                  "y": 0.6815789473684211
              }, {
                  "x": 0.3508500772797527,
                  "y": 0.6815789473684211
              }, {
                  "x": 0.31452859350850076,
                  "y": 0.6815789473684211
              }, {
                  "x": 0.2782071097372488,
                  "y": 0.6815789473684211
              }, {
                  "x": 0.22952086553323028,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.22565687789799072,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.18547140649149924,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.16537867078825347,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.11205564142194745,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.09041731066460587,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.08423493044822257,
                  "y": 0.6684210526315789
              }, {
                  "x": 0.061051004636785165,
                  "y": 0.6289473684210526
              }, {
                  "x": 0.03786707882534776,
                  "y": 0.5605263157894737
              }, {
                  "x": 0.04173106646058733,
                  "y": 0.5263157894736842
              }, {
                  "x": 0.019319938176197836,
                  "y": 0.4605263157894737
              }, {
                  "x": 0.015455950540958269,
                  "y": 0.4394736842105263
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.4710526315789474
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.4131578947368421
              }, {
                  "x": 0.02472952086553323,
                  "y": 0.3815789473684211
              }, {
                  "x": 0.025502318392581144,
                  "y": 0.33157894736842103
              }, {
                  "x": 0.0285935085007728,
                  "y": 0.31842105263157894
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.3026315789473684
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.29210526315789476
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.28421052631578947
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.28421052631578947
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.28421052631578947
              }, {
                  "x": 0.030139103554868624,
                  "y": 0.28157894736842104
              }, {
                  "x": 0.03168469860896445,
                  "y": 0.23421052631578948
              }, {
                  "x": 0.03168469860896445,
                  "y": 0.23421052631578948
              }, {
                  "x": 0.03168469860896445,
                  "y": 0.23421052631578948
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.2578947368421053
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.2578947368421053
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.2578947368421053
              }, {
                  "x": 0.02704791344667697,
                  "y": 0.2578947368421053
              }, {
                  "x": 0.02936630602782071,
                  "y": 0.2578947368421053
              }, {
                  "x": 0.030139103554868624,
                  "y": 0.26052631578947366
              }, {
                  "x": 0.03245749613601236,
                  "y": 0.25263157894736843
              }, {
                  "x": 0.03863987635239567,
                  "y": 0.23157894736842105
              }, {
                  "x": 0.05332302936630603,
                  "y": 0.1763157894736842
              }, {
                  "x": 0.061051004636785165,
                  "y": 0.14210526315789473
              }, {
                  "x": 0.07032457496136012,
                  "y": 0.11578947368421053
              }, {
                  "x": 0.08500772797527048,
                  "y": 0.0868421052631579
              }, {
                  "x": 0.08887171561051005,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.11901081916537867,
                  "y": 0.10263157894736842
              }, {
                  "x": 0.1267387944358578,
                  "y": 0.09210526315789473
              }, {
                  "x": 0.1267387944358578,
                  "y": 0.08947368421052632
              }, {
                  "x": 0.09273570324574962,
                  "y": 0.12105263157894737
              }, {
                  "x": 0.08191653786707882,
                  "y": 0.13157894736842105
              }, {
                  "x": 0.06568778979907264,
                  "y": 0.15263157894736842
              }, {
                  "x": 0.05100463678516229,
                  "y": 0.18947368421052632
              }, {
                  "x": 0.0401854714064915,
                  "y": 0.24736842105263157
              }, {
                  "x": 0.04868624420401855,
                  "y": 0.25263157894736843
              }, {
                  "x": 0.08346213292117466,
                  "y": 0.2736842105263158
              }, {
                  "x": 0.14296754250386398,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.16769706336939721,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.20015455950540958,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.20788253477588872,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.2426584234930448,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.2743431221020093,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.2936630602782071,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.32998454404945904,
                  "y": 0.2868421052631579
              }, {
                  "x": 0.34775888717156106,
                  "y": 0.2868421052631579
              }, {
                  "x": 0.37789799072642966,
                  "y": 0.28421052631578947
              }, {
                  "x": 0.44435857805255025,
                  "y": 0.30526315789473685
              }, {
                  "x": 0.44590417310664604,
                  "y": 0.30526315789473685
              }, {
                  "x": 0.5255023183925811,
                  "y": 0.3026315789473684
              }, {
                  "x": 0.5904173106646059,
                  "y": 0.29736842105263156
              }, {
                  "x": 0.5911901081916537,
                  "y": 0.29473684210526313
              }, {
                  "x": 0.6081916537867079,
                  "y": 0.28421052631578947
              }, {
                  "x": 0.6383307573415765,
                  "y": 0.30526315789473685
              }, {
                  "x": 0.6723338485316847,
                  "y": 0.4052631578947368
              }, {
                  "x": 0.6692426584234931,
                  "y": 0.45526315789473687
              }, {
                  "x": 0.6452859350850078,
                  "y": 0.5210526315789473
              }, {
                  "x": 0.615146831530139,
                  "y": 0.5631578947368421
              }, {
                  "x": 0.5811437403400309,
                  "y": 0.6105263157894737
              }, {
                  "x": 0.5525502318392581,
                  "y": 0.6289473684210526
              }, {
                  "x": 0.5301391035548686,
                  "y": 0.6289473684210526
              }, {
                  "x": 0.5231839258114374,
                  "y": 0.6289473684210526
              }, {
                  "x": 0.500772797527048,
                  "y": 0.6289473684210526
              }, {
                  "x": 0.49149922720247297,
                  "y": 0.631578947368421
              }, {
                  "x": 0.4714064914992272,
                  "y": 0.631578947368421
              }, {
                  "x": 0.4536321483771252,
                  "y": 0.6342105263157894
              }, {
                  "x": 0.4250386398763524,
                  "y": 0.6342105263157894
              }, {
                  "x": 0.3910355486862442,
                  "y": 0.631578947368421
              }, {
                  "x": 0.3701700154559505,
                  "y": 0.6342105263157894
              }, {
                  "x": 0.33384853168469864,
                  "y": 0.6342105263157894
              }, {
                  "x": 0.2867078825347759,
                  "y": 0.6368421052631579
              }, {
                  "x": 0.2642967542503864,
                  "y": 0.6394736842105263
              }, {
                  "x": 0.2596599690880989,
                  "y": 0.6394736842105263
              }, {
                  "x": 0.1955177743431221,
                  "y": 0.6473684210526316
              }, {
                  "x": 0.1901081916537867,
                  "y": 0.6473684210526316
              }, {
                  "x": 0.16537867078825347,
                  "y": 0.6473684210526316
              }, {
                  "x": 0.16537867078825347,
                  "y": 0.6473684210526316
              }, {
                  "x": 0.12287480680061824,
                  "y": 0.6421052631578947
              }, {
                  "x": 0.12287480680061824,
                  "y": 0.6421052631578947
              }, {
                  "x": 0.08346213292117466,
                  "y": 0.6421052631578947
              }, {
                  "x": 0.08346213292117466,
                  "y": 0.6394736842105263
              }, {
                  "x": 0.07959814528593509,
                  "y": 0.6210526315789474
              }, {
                  "x": 0.07032457496136012,
                  "y": 0.6052631578947368
              }, {
                  "x": 0.04559505409582689,
                  "y": 0.6
              }, {
                  "x": 0.01854714064914992,
                  "y": 0.46578947368421053
              }, {
                  "x": 0.014683153013910355,
                  "y": 0.4368421052631579
              }, {
                  "x": 0.01622874806800618,
                  "y": 0.3973684210526316
              }, {
                  "x": 0.019319938176197836,
                  "y": 0.35
              }, {
                  "x": 0.02627511591962906,
                  "y": 0.2894736842105263
              }, {
                  "x": 0.030911901081916538,
                  "y": 0.25526315789473686
              }, {
                  "x": 0.04636785162287481,
                  "y": 0.16578947368421051
              }, {
                  "x": 0.07573415765069552,
                  "y": 0.09473684210526316
              }, {
                  "x": 0.13987635239567234,
                  "y": 0.0868421052631579
              }, {
                  "x": 0.16228748068006182,
                  "y": 0.0868421052631579
              }, {
                  "x": 0.2132921174652241,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.29520865533230295,
                  "y": 0.06315789473684211
              }, {
                  "x": 0.357032457496136,
                  "y": 0.05789473684210526
              }, {
                  "x": 0.3972179289026275,
                  "y": 0.06578947368421052
              }, {
                  "x": 0.46367851622874806,
                  "y": 0.09210526315789473
              }, {
                  "x": 0.5285935085007728,
                  "y": 0.08947368421052632
              }, {
                  "x": 0.5741885625965997,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.58887171561051,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.6282843894899537,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.6360123647604328,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.6421947449768161,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.6421947449768161,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.6421947449768161,
                  "y": 0.08157894736842106
              }, {
                  "x": 0.7040185471406492,
                  "y": 0.10263157894736842
              }]
          ParallelAnimation {
              running: true
              PropertyAnimation {
                  target: logoRoot
                  property: 'opacity'
                  easing.period: 0.38
                  easing.amplitude: 0.95
                  easing.type: Easing.InOutQuint
                  from: 0
                  to: 0.9
                  duration: 26000
              }        PathAnimation {            path: Path {                PathSvg {   
                          path: generate_path_from_pct_array(ps, sparkAnimationPoints)
                      }
                  }
                  orientation: PathAnimation.Fixed            duration: 20000
                  loops: PathAnimation.Infinite            target: explosionEmitter
              }
          }    SequentialAnimation {
              running: true
              PathAnimation {            path: Path {                PathSvg {            
                          path: generate_path_from_pct_array(ps, sparkAnimationPoints)
                      }
                  }
                  orientation: PathAnimation.Fixed            duration: 20000
                  loops: PathAnimation.Infinite            target: starEmitter
              }
          }
          Emitter {        id: starEmitter
              objectName: "starEmitter"
         
              width: menuRoot.width * 0.01 // 0.45
              height: menuRoot.height * 0.005 // 0.35
              enabled: true
              group: "logo2"
              emitRate: 70        startTime: 0
              lifeSpan: 2000
              lifeSpanVariation: 0
              size: 50
              sizeVariation: 24
              endSize: 0
              velocityFromMovement: 2
              system: ps
              z: 150
              velocity: PointDirection {
                  x: 0
                  xVariation: 0
                  y: 0
                  yVariation: 0
              }
              acceleration: PointDirection {
                  x: 0
                  xVariation: 0
                  y: 0
                  yVariation: 0
              }
              //     shape: MaskShape {
              //        source: "qrc:///images/BlitzLogoModern.svg"
              //   }
              shape: EllipseShape {
                  fill: false
              }
              scale: 1
          }
          ImageParticle {
              id: starParticle
              objectName: "starEmitter"
              groups: ["logo2"]
              source: "qrc:///images/star.png"        color: "#fdf6f2"
              colorVariation: 0
              alpha: 0.8
              alphaVariation: 0.1
              redVariation: 0
              greenVariation: 0
              blueVariation: 0.3
              rotation: 0
              rotationVariation: 90
              autoRotation: false
              rotationVelocity: 0
              rotationVelocityVariation: 90
              entryEffect: ImageParticle.Fade
              system: ps
          }    ImageParticle {
              objectName: "asdf"
              groups: ["asdf"]
              source: "qrc:///particleresources/glowdot.png"
              color: "white"
              colorVariation: 0
              alpha: 1
              alphaVariation: 0
              redVariation: 0
              greenVariation: 0
              blueVariation: 0
              rotation: 0
              rotationVariation: 45
              autoRotation: false
              rotationVelocity: 0
              rotationVelocityVariation: 0
              entryEffect: ImageParticle.Scale
              system: ps
          }    Emitter {
              objectName: ""
              id: explosionEmitter
              width: 10
              height: 10
              enabled: true
              group: "asdf"
              emitRate: 16
              maximumEmitted: -1
              startTime: 2000
              lifeSpan: 3000
              lifeSpanVariation: 0
              size: 60
              sizeVariation: 50
              endSize: 15
              velocityFromMovement: 4
              system: ps
              velocity: PointDirection {
                  x: -25
                  xVariation: -250
                  y: -250
                  yVariation: -250
              }
              acceleration: PointDirection {
                  x: 0
                  xVariation: -200
                  y: 0
                  yVariation: -560
              }
              shape: RectangleShape {}
          }
      }
       

       -----

      The rest of the code is just default out-of-the-box  QtQuickControls2 Application

       

      See a live version here:

       

      https://www.datafault.net/ux-bug/

       

      Complete Source:

      https://www.datafault.net/ux-bug/datafaultLogo.tgz

       

        Attachments

        For Gerrit Dashboard: QTBUG-85536
        # Subject Branch Project Status CR V

          Activity

            People

            Assignee:
            lpotter Lorn Potter
            Reporter:
            nodelogik Mike Nickaloff
            PM Owner:
            Veli-Pekka Heinonen Veli-Pekka Heinonen
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:

                Gerrit Reviews

                There are no open Gerrit changes