Mobile Browser - CHart with zoom not able to scroll the page

[olivierscheffler]

Expected behaviour

When I see a zoom's chart, I should be able to still scroll the page where the chart is and not be in conflict with the charts event

Actual behaviour

I'm not able to scroll the page and some events are live on the charts.
More precision : on beginning it seems to be able to scroll the page but if you zoom once and return to default view you will not be able.
In my case i'm never allow to scroll the page when touching the chart on mobile

Live demo with steps to reproduce

DEMO

Affected browser(s)

Chrome on Android and Safari on iOs

[KacperMadej]

Hi @SojeSkormdark ,

Thank you for reporting about the problem. However, I am not able to recreate the problem on Chrome on Android. Could you provide more detailed steps required to replicate the problem on the demo you have provided?

[sebastianbochan]

I was also cannot be able to replicate it on the iOS.

[olivierscheffler]

@KacperMadej @sebastianbochan ,

Hi,

I try another time on my chrome in android (last version).
If you run the jsfiddle, try to scroll the right part from the chart itself you will be able to scroll the entire page with no trouble.
But if you zoom on the chart and try to scroll the page from the chart you will not be able. ANd if you click on Reset zoom you will not be able to scroll the page from the chart. (When I say from the chart, I mean put your finger on the chart and try to scroll the right section)

Thank you,

[sebastianbochan]

@SojeSkormdark could you prepare a simple clip from your device?

[olivierscheffler]

@sebastianbochan You are not able to replicate?
Here a screen recorder from my android with touchpoint visible.
screen-recorder.zip
Hope you will be able to look at it with no trouble!

Thx

[KacperMadej]

@SojeSkormdark Thank you for the video. I was able to recreate the problem.

Internal note: After a pinch triggering zoom, drag on plot area are captured and interpreted as hover over chart - only tooltip is triggered and page scroll is disabled.

[olivierscheffler]

On my version I use for a web site (4.1.9), I'm never able to scroll over the zoom's chart but in this version I'm able at the beginning.. I don't know if it's a version problem or not but this is a strange behaviour..

[TorsteinHonsi]

Since v5.0, zoomable charts on a touch device need to be initiated with a two-finger touch in order to zoom. The rationale behind the change was this exact problem - users were not able to scroll past the chart. But once the zooming was initiated, it captured both single and multi touch.

I've made a change in the commit below, so that when you click Reset zoom, the zooming needs to be initiated with two fingers again the second time.

[olivierscheffler]

Hi @TorsteinHonsi,

Do you think it's possible to make the change on version 4.2.0 from highstock lib?
I don't use version 5.0 but the problem is here too and I can upgrade version to 5.0...
Or can you tell me where I need to put your change on the 4.2.0 lib ?

Thx

[KacperMadej]

@olivierscheffler
Please try with a small code wrapper / workaround for 4.2.0 as presented in this demo: http://jsfiddle.net/z70vzor9/3/

[olivierscheffler]

@KacperMadej
Thank you for the jsfiddle but it doesn't work... I try on my mobile and I'm not able to scroll from the chart the rest of the page...

[KacperMadej]

@olivierscheffler Unfortunately this would mean that only applying the fix is not resolving the problem for 4.2.0 and more changes needs to be done, so update to a newer version is required. Have you checked if the fix is working for in the current version? Demo: http://jsfiddle.net/z70vzor9/4/

[olivierscheffler]

@KacperMadej
The change works on this fiddle when I try to scroll before and after a zoom if I click on reset Zoom.
But if there's a effective zoom on the chart, I'm not able to scroll over the page actually..
And on my project I will not be able to use v5 because it will make some more development since we develop in 4.2 from the beginning.