Skip to content

Page zooming (Ctrl +/-) in IE7 causes points to scale out of sync with lines #538

Open
dnschnur opened this Issue Sep 28, 2012 · 4 comments

1 participant

@dnschnur
Flot member

Original author: i.c...@nki.nl (February 01, 2011 13:41:22)

When the user resizes the webpage using Ctrl-mousewheel or Ctrl- and Ctrl+ the ticks (points) scale out of sync with the rest of the graph. That is, the point are resized 'more' than the graph: when the page is made smaller the points appear to fit an even smaller graph and when the page is enlarged the points would fit a bigger graph.

Screenshots here:
http://pics.livejournal.com/alternatief/gallery/00007r23

The problem remains when the flot is redrawn as long as the page is enlarged/made smaller from the default.

I have posted this issue on the Github fork recently, but as the original is still quite active, i figured i should add the issue here as well. Flot is great btw :-)

Original issue: http://code.google.com/p/flot/issues/detail?id=459

@dnschnur
Flot member

From olau%iol...@gtempaccount.com on February 02, 2011 11:37:23
The reason is that you didn't specify a fixed width on the placeholder div. You need to do that.

Now, you could argue that if the width has to be fixed, then Flot should fix it when you do the plot.

I think there are two reasons why I think it's best to leave it as it is for now. First, I've recently added a plugin that checks for resize changes and replots in case it finds any. This wouldn't work if Flot fixes the width - of course, I could do some hackery there, but I'd prefer to avoid that. Second, I'm going to land a patch for canvas text labels soonish, and once it's in, I don't think you will have this problem anymore.

@dnschnur
Flot member

From i.c...@nki.nl on February 02, 2011 15:48:10
Hi Ole,

Thanks for answering.
My placeholder looks like:

It is specific to IE (7 anyway, still have to test 8), Firefox scales just fine.

@dnschnur
Flot member

From olau%iol...@gtempaccount.com on February 03, 2011 12:32:16
Ah, sorry, I didn't read your description properly. I just read "resize page" as in resize the window by dragging the corner and went with that.

The reason why this happens is that the VML scales differently to the real HTML. The graph is made with VML (by excanvas), the ticks are made with HTML. Now the canvas text patch I mention might fix this, since it should mean that the ticks are going to be made with VML too.

Meanwhile, you could grab the resize plugin here

http://flot.googlecode.com/svn/trunk/jquery.flot.resize.js

and see if it helps. It may have to be modified to take font resizing into account. That's basically the only solution I can think of - if the font size changes, you have to redraw the graphics to fit.

@dnschnur
Flot member

From i.c...@nki.nl on February 03, 2011 14:21:41
I should add that resizing the font by using the menu options: View > Text Size > [Largest .. Smallest] does not cause this problem.
I only now realise i have not been using the right words: it's 'zoomlevel'. When user changes the zoomlevel in IE7 things go wrong.

Thanks for the tips. If/when this particular inconvenience gets to the top of the issue list for my webapp, i'll see about detecting zoomlevel changes and replotting. And posting my solution, of course :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.