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

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 7, 2017

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jun 7, 2017

Contributor

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

Contributor

sebastianbochan commented Jun 7, 2017

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

@olivierscheffler

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

olivierscheffler 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,

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

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jun 7, 2017

Contributor

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

Contributor

sebastianbochan commented Jun 7, 2017

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

@olivierscheffler

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

olivierscheffler 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

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 8, 2017

Contributor

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

Contributor

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.

@KacperMadej KacperMadej added the Bug label Jun 8, 2017

@olivierscheffler

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

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

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jun 13, 2017

Collaborator

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.

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

olivierscheffler 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

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 26, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

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

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 27, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@olivierscheffler

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

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