Doesn't works properly when browser zoom !== 100%

[HondaHiroyuki]

Resizing by dragging gutters doesn't work correctly on Microsoft Edge and Internet Explorer.
Resized result doesn't match the amount of dragging operation.

It can be seen in all the examples on the documentation site.

Split.js seems to work, but I'd like to use this module if it's supposed to support these Windows browsers.
Thanks.

[alexfeds]

would be nice to have the library working in Internet Explorer. I think just because this library using FlexBox Layout, its not working properly in IE. Would be nice instead of FlexBox layout to use Bootstrap 3 grid system??

[bertrandg]

yes, you 're right.
I need to take time to test and fix it asap!

[bertrandg]

@HondaHiroyuki
I've just test it on IE11 and it works.. I had to add some polyfill on the website angular-cli config to view it on IE but that was an other issue now fixed.

But I have an idea on what's going on with your bug. Maybe your browser isn't with zoom 100% ?
Can you check it again please: https://bertrandg.github.io/angular-split/

@alexfeds
This lib is 100% based on flexbox, so that's only for browser supporting it.. but compatibility is pretty good:
https://caniuse.com/#feat=flexbox

[alexfeds]

@bertrandg Thanks for suggesting. I am creating enterprise application that mostly be used on Internet Explorer 7-11. So that's why I am using Bootstrap 3 for gridding. Can you point me in a direction on how can I create splitter library that will be based on Bootstrap 3 layout. So instead of flexbox I replace it with Bootstrap. Any advice appreciate

[HondaHiroyuki]

@bertrandg
Thank you for your reply.

As you say, the problem seems to be caused by the zoom setting of browsers, not by browsers.
I'm using a HiDPI display, and the default zoom setting of IE and Edge is 250%.
When I set the zoom to 100%, the resizing problem did not occur, although the page size became quite small and difficult to read.

I also found that it occurred even on any other browsers when I changed the zoom setting.

Is it possible to consider the zoom setting of browsers on resizing?
It would be very nice if this module could support it.

[bertrandg]

@HondaHiroyuki Thanks for the feedbacks, I will investigate about that. Issue not there using Split.js so there should be a workaround..

@alexfeds Wow, do you know that IE7 & 8 are not compatible with angular:
https://angular.io/guide/browser-support
Bootstrap is used for 'static grid' but you can use floating div with fixed pixel/percent sizes if you want to build your own.

[tkglaser]

@bertrandg I would do a PR but can't for various reasons. This is probably a one-line fix.
in private drag() of the SplitComponent just divide offsetPixel by window.devicePixelRatio. Maybe a try-catch around it.

https://stackoverflow.com/a/37815031

Would be really nice to get this fixed as I'd like to use it for a project. :)

[bertrandg]

Yep, I will try to test and implement it this weekend! ;)

[bertrandg]

@tkglaser @HondaHiroyuki @alexfeds

Done in angular-split@1.0.0-rc.3 :)
you can directly test on the website:
https://bertrandg.github.io/angular-split/#/examples/nested-split

Please report me if it works correctly now on your devices before I close the issue.

[tkglaser]

@bertrandg Works great, many thanks!

[bertrandg]

Seems this change breaks behavior on mobile: #85
I wiil try to fix it but will remove devicePixelRatio use if no solution.. :(

[HondaHiroyuki]

@bertrandg
On my device, now it does not work correctly except on IE and Edge.

On my Windows,
【IE, Edge】
default zoom: 250%
devicePixelRatio: 2.5
【Chrome, Firefox】
default zoom: 100%, but the page size is scaled according to the DPI scaling setting of Windows
devicePixelRatio: 2.5

On the browsers that support HiDPI scaling internally, not by the default zoom setting, devicePixelRatio is not consistent with the browser zoom, which causes the resizing problem.

I think that the solution is to use clientX/clientY instead of screenX/screenY in calculating the amount of dragging operations, without using devicePixelRatio.

While screenX/screenY returns the device pixel value, clientX/clientY returns the CSS pixel value, so perhaps you don't have to care about the browser zoom, DPI scaling, or devicePixelRatio.

Could you please check if the solution works?
It should also solve #85.

[Mysame]

Fixed in my branch
https://github.com/Mysame/angular-split

Forked from https://github.com/aszechlicki/angular-split to also include rxjs6

Also fixes #85