Weird behavior in IE

[wonsuc]

If I set a border on .ui-layout-pane, the resizer position is being placed wrongly. left position should be -2px from the result.

This is stylesheet which makes the problem.

.ui-layout-pane {
    border: 1px solid #BBB;
}

It is showing correctly in Chrome, but IE11 is showing weirdly, but If I drag the resizer it showing fine again.

[GedMarc]

Try (As shown from the demo's)

.resizer-open, .resizer-east-open /*to set for a specific pane resizer*/
{
border.....
}

[GedMarc]

Did you manage to come right @wonsuc

[GedMarc]

Thanks for the update -

Can you attach a replica I could check? Can't seem to replicate it.

[wonsuc]

Thanks for the quick response.

I figured out the problem.

/* BOX SIZING FIX */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

Currently, most web configures their stylesheet's box-sizing property to border-box, but if you put this CSS code, this issue happens only in IE.

I hope it will be fixed soon :)

[wonsuc]

Any feedback?

[GedMarc]

what would you recommend the fix forward would be? :)

[wonsuc]

I didn't investigate the source code of this library, so I don't know how this library measure sizes of elements. But there must be some bug since the Chrome browser has no issue and only IE has this issue.
The expected behavior is the same result even the border-sizing property is border-box.
Every website which uses border-box will render layout wrongly with this library.
I'm sorry that I can't provide detail workaround.

[GedMarc]

are you on gitter?

[GedMarc]

I think jquery 3.4 solves it -

can you test the attachment nested.html please?

You will see I set the border at the top

demos.zip

[wonsuc]

Was it jQuery's bug? I'm using jQuery 3.3.1 currently, I will try 3.4 and I will let you know.
Thanks for the response.

[GedMarc]

No not a bug, I believe has to do with the .position() vs .offset() thingy with IE, there was just changes to height and width calcs in 3.4 :)

https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

[GedMarc]

But the attachment works with the CSS provided, the current layout version, and JQuery 3.4, in the complex layout demonstration, so hoping you come back with a working verification ;)

[wonsuc]

It works, but the right border of the box has 2-pixel border.
You mean your attachment solution will not work with an older version of jQuery?

[GedMarc]

Dunno, can't replicate it -

Work with me here man :) Are you saying that the demo is not what you want, the output on my machine is identical in IE 11 Chrome and Firefox?

From the description it's closer to something else firing after the resizeAll event that IE isn't working with, which is why the demo is fine?

Firing a resizeAll event on your page after $.ready may just do the trick

If we change the base core of presentation, because this is used is libraries like PrimeFaces (14 mil people), thats a lot of people not experiencing this, and a change to the layout handling methods will be very impactful.

[wonsuc]

.ui-layout-resizer-west {
	/* border-left: 1px solid #BBB; */
}

Commenting out this line from your code fixed the issue, thank you for the support.

[GedMarc]

Phew! :)