browser zoom

[mike-aungsan]

When browser zoom, the chart does not render, correctly,

Please have a look demo page with various zoom of the browser such as 110%, 120%, 130%....

Thanks.

[mleden]

Hi Mike,

I initially thought that this was a problem, too. However, on further analysis I think this is actually the result of anomalies within the browser implementation of the zoom feature. For example, on WinXP and Google Chrome, I see what appear to be mis-alignments within the plugin UI as I used the browser zoom feature. However, as I progress up to 200% and 300% those "mis-alignments" correct themselves. I see the same thing in both the jQuery Gantt demo and my own implementation using the plugin. Perhaps what we are seeing is related to rounding in the zoom algorithms? I also tried to actually cleanup/simplify the CSS and grid rendering logic of the plugin, but I eventually gave up.

-Mark

[mike-aungsan]

Yes I did tried various way. What about using actual table rather then
using png grid ?

[usmonster]

Duplicate of #36, possibly related to #32.

[usmonster]

@mike-aungsan , @mleden, is this an issue specific to chrome, as described in #32? Do you still see the issue when using the current version on master?

[mleden]

The issue can be easily reproduced on either Chrome or FF as follows:

1. Open browser and navigate to the jQuery Gantt "demo" page of:
   http://taitems.github.io/jQuery.Gantt/
2. Use browser zoom feature to zoom in 4 times
   Expected:
   Gridlines of gantt chart to remain aligned
   Actual:
   Gridlines are no longer aligned (increasingly misaligned to the right)
   What is interesting, however, is that if you zoom in further to 200% and 300%, the proper alignment seems to return.

[usmonster]

Ugh, I think I know what's causing this. I'll try to put in a fix sometime this month, though it might just go away once we switch the CSS box-sizing of the plugin (see #102).

[cormier]

Hi, I have tested this suggestion by resetting the box-sizing to content-box as suggested in this commit 2666f30
It seems to me that even with this patch the issue persists, at least in my browser (Firefox 32.0.2)

[usmonster]

@cormier The workaround you reference would not fix the issue (there's more to it), but please follow this and/or #102 for updates.

[cormier]

@usmonster thanks for the reply and for the information. I'm willing to help and try to implement a fix. You said there's more to it than resetting the box-sizing to content-box: anything specific in mind?
Thanks.

[Guracao]

Hi there! I have the same issue as mentioned above. At 100%, 200% and 300% it renders all as it should, everything between is causing the gridlines not longer to be aligned. Just wanted to ask, if theres any progress regarding to this? Thanks in advance!

[Ezyweb-uk]

Me too on the demo, see #102

[usmonster]

@nickwuk (continuing conversation from #102 here) ...it was a combination of CSS and markup fixes, likely done in 5776d00 (along with lots of other stuff). It's still not perfect at certain zoom levels, which is why this issue is still open. Hope this helps!

[usmonster]

Reopening after accidental auto-close when I merged a partial fix.

The issue now seems to be strictly limited to the background display at specific browser zoom levels, i.e. anything not a multiple of 25. This is because the background image has a fixed-width border, and so it renders poorly at certain scales (e.g. 80%, 90%, 110%, ...).

This can probably be solved by changing how the background is rendered, e.g. by using a gradient instead of an image.