Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
olivierscheffler opened this issue Jun 6, 2017 · 13 comments
Closed

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

olivierscheffler opened this issue Jun 6, 2017 · 13 comments
Labels

Comments

@olivierscheffler
Copy link

@olivierscheffler olivierscheffler commented Jun 6, 2017

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
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 7, 2017

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
Copy link
Contributor

@sebastianbochan sebastianbochan commented Jun 7, 2017

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

@olivierscheffler
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 7, 2017

@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
Copy link
Contributor

@sebastianbochan sebastianbochan commented Jun 7, 2017

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

@olivierscheffler
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 7, 2017

@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
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 8, 2017

@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
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 8, 2017

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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Jun 13, 2017

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
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 23, 2017

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
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 26, 2017

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

@olivierscheffler
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 27, 2017

@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
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 27, 2017

@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
Copy link
Author

@olivierscheffler olivierscheffler commented Jun 27, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants