Touch handling completely broken on Chrome version 70









up vote
0
down vote

favorite












Looks like Google Chrome v70 completely screwed up the usage of D3 under touch screen laptops.



We are working with a Panasonic FZ-M1 tablet where we run some webserver stuff which is creating a topology view with force directed graph.
since yesterday the graph is completely unresponsive to gesture, you can't move, you can't zoom, nothing.
We installed Chrome v69 and then it works perfectly. Unfortunately Chrome is auto updating.
Tested with D3 v5.7.0, still the same.



You can try by using a touchscreen laptop or tablet with the D3 force directed graph example in the gallery or by enabling touch screen simulation in developer tools.










share|improve this question



























    up vote
    0
    down vote

    favorite












    Looks like Google Chrome v70 completely screwed up the usage of D3 under touch screen laptops.



    We are working with a Panasonic FZ-M1 tablet where we run some webserver stuff which is creating a topology view with force directed graph.
    since yesterday the graph is completely unresponsive to gesture, you can't move, you can't zoom, nothing.
    We installed Chrome v69 and then it works perfectly. Unfortunately Chrome is auto updating.
    Tested with D3 v5.7.0, still the same.



    You can try by using a touchscreen laptop or tablet with the D3 force directed graph example in the gallery or by enabling touch screen simulation in developer tools.










    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      Looks like Google Chrome v70 completely screwed up the usage of D3 under touch screen laptops.



      We are working with a Panasonic FZ-M1 tablet where we run some webserver stuff which is creating a topology view with force directed graph.
      since yesterday the graph is completely unresponsive to gesture, you can't move, you can't zoom, nothing.
      We installed Chrome v69 and then it works perfectly. Unfortunately Chrome is auto updating.
      Tested with D3 v5.7.0, still the same.



      You can try by using a touchscreen laptop or tablet with the D3 force directed graph example in the gallery or by enabling touch screen simulation in developer tools.










      share|improve this question















      Looks like Google Chrome v70 completely screwed up the usage of D3 under touch screen laptops.



      We are working with a Panasonic FZ-M1 tablet where we run some webserver stuff which is creating a topology view with force directed graph.
      since yesterday the graph is completely unresponsive to gesture, you can't move, you can't zoom, nothing.
      We installed Chrome v69 and then it works perfectly. Unfortunately Chrome is auto updating.
      Tested with D3 v5.7.0, still the same.



      You can try by using a touchscreen laptop or tablet with the D3 force directed graph example in the gallery or by enabling touch screen simulation in developer tools.







      google-chrome d3.js touch






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 9 at 20:49









      altocumulus

      13.2k104353




      13.2k104353










      asked Nov 9 at 18:53









      Lorenzo

      6




      6






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          D3 relies on the ontouchstart property for feature detection, i.e. touch event listeners are only attached if this property is present. Due to changes in Chrome v70 this detection mechanism seems to be broken in D3.




          ontouch* APIs default to disabled on desktop



          To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.




          Related: Disable legacy touch event APIs on desktop



          Your laptops running Windows are most likely detected as being desktop devices instead of mobile devices. Hence, they are affected by those changes to Chrome v70 resulting in the touch event listeners not being registered any more.



          This issue has been previously reported as an issue on the d3-drag module: #47 Upcoming touch detection changes in desktop Chrome. Once I had commented on that issue providing a reference to this question, fortunately, Mike Bostock replied within an hour. Better still, there is an easy solution to problem: You can use drag.touchable(detector) to control when to apply touch event listeners overriding the default behavior:




          Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.




          As suggested by Mike drag.touchable(navigator.maxTouchPoints) seems to be a good candidate. The nuclear option drag.touchable(true) would ensure the touch event listeners be applied in any case.






          share|improve this answer




















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













             

            draft saved


            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231736%2ftouch-handling-completely-broken-on-chrome-version-70%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            D3 relies on the ontouchstart property for feature detection, i.e. touch event listeners are only attached if this property is present. Due to changes in Chrome v70 this detection mechanism seems to be broken in D3.




            ontouch* APIs default to disabled on desktop



            To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.




            Related: Disable legacy touch event APIs on desktop



            Your laptops running Windows are most likely detected as being desktop devices instead of mobile devices. Hence, they are affected by those changes to Chrome v70 resulting in the touch event listeners not being registered any more.



            This issue has been previously reported as an issue on the d3-drag module: #47 Upcoming touch detection changes in desktop Chrome. Once I had commented on that issue providing a reference to this question, fortunately, Mike Bostock replied within an hour. Better still, there is an easy solution to problem: You can use drag.touchable(detector) to control when to apply touch event listeners overriding the default behavior:




            Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.




            As suggested by Mike drag.touchable(navigator.maxTouchPoints) seems to be a good candidate. The nuclear option drag.touchable(true) would ensure the touch event listeners be applied in any case.






            share|improve this answer
























              up vote
              0
              down vote













              D3 relies on the ontouchstart property for feature detection, i.e. touch event listeners are only attached if this property is present. Due to changes in Chrome v70 this detection mechanism seems to be broken in D3.




              ontouch* APIs default to disabled on desktop



              To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.




              Related: Disable legacy touch event APIs on desktop



              Your laptops running Windows are most likely detected as being desktop devices instead of mobile devices. Hence, they are affected by those changes to Chrome v70 resulting in the touch event listeners not being registered any more.



              This issue has been previously reported as an issue on the d3-drag module: #47 Upcoming touch detection changes in desktop Chrome. Once I had commented on that issue providing a reference to this question, fortunately, Mike Bostock replied within an hour. Better still, there is an easy solution to problem: You can use drag.touchable(detector) to control when to apply touch event listeners overriding the default behavior:




              Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.




              As suggested by Mike drag.touchable(navigator.maxTouchPoints) seems to be a good candidate. The nuclear option drag.touchable(true) would ensure the touch event listeners be applied in any case.






              share|improve this answer






















                up vote
                0
                down vote










                up vote
                0
                down vote









                D3 relies on the ontouchstart property for feature detection, i.e. touch event listeners are only attached if this property is present. Due to changes in Chrome v70 this detection mechanism seems to be broken in D3.




                ontouch* APIs default to disabled on desktop



                To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.




                Related: Disable legacy touch event APIs on desktop



                Your laptops running Windows are most likely detected as being desktop devices instead of mobile devices. Hence, they are affected by those changes to Chrome v70 resulting in the touch event listeners not being registered any more.



                This issue has been previously reported as an issue on the d3-drag module: #47 Upcoming touch detection changes in desktop Chrome. Once I had commented on that issue providing a reference to this question, fortunately, Mike Bostock replied within an hour. Better still, there is an easy solution to problem: You can use drag.touchable(detector) to control when to apply touch event listeners overriding the default behavior:




                Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.




                As suggested by Mike drag.touchable(navigator.maxTouchPoints) seems to be a good candidate. The nuclear option drag.touchable(true) would ensure the touch event listeners be applied in any case.






                share|improve this answer












                D3 relies on the ontouchstart property for feature detection, i.e. touch event listeners are only attached if this property is present. Due to changes in Chrome v70 this detection mechanism seems to be broken in D3.




                ontouch* APIs default to disabled on desktop



                To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.




                Related: Disable legacy touch event APIs on desktop



                Your laptops running Windows are most likely detected as being desktop devices instead of mobile devices. Hence, they are affected by those changes to Chrome v70 resulting in the touch event listeners not being registered any more.



                This issue has been previously reported as an issue on the d3-drag module: #47 Upcoming touch detection changes in desktop Chrome. Once I had commented on that issue providing a reference to this question, fortunately, Mike Bostock replied within an hour. Better still, there is an easy solution to problem: You can use drag.touchable(detector) to control when to apply touch event listeners overriding the default behavior:




                Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.




                As suggested by Mike drag.touchable(navigator.maxTouchPoints) seems to be a good candidate. The nuclear option drag.touchable(true) would ensure the touch event listeners be applied in any case.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 11 at 22:07









                altocumulus

                13.2k104353




                13.2k104353



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231736%2ftouch-handling-completely-broken-on-chrome-version-70%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Use pre created SQLite database for Android project in kotlin

                    Darth Vader #20

                    Ondo