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.
google-chrome d3.js touch
add a comment |
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.
google-chrome d3.js touch
add a comment |
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.
google-chrome d3.js touch
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
google-chrome d3.js touch
edited Nov 9 at 20:49
altocumulus
13.2k104353
13.2k104353
asked Nov 9 at 18:53
Lorenzo
6
6
add a comment |
add a comment |
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
, andelement
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such asaddEventListener("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.
add a comment |
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
, andelement
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such asaddEventListener("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.
add a comment |
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
, andelement
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such asaddEventListener("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.
add a comment |
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
, andelement
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such asaddEventListener("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.
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
, andelement
are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such asaddEventListener("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.
answered Nov 11 at 22:07
altocumulus
13.2k104353
13.2k104353
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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