Weird behavior in IE - Githubissues

wonsuc commented 5 years ago

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 commented 5 years ago

Try (As shown from the demo's)

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

GedMarc commented 5 years ago

Did you manage to come right @wonsuc

GedMarc commented 5 years ago

Thanks for the update -

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

wonsuc commented 5 years ago

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 commented 5 years ago

Any feedback?

GedMarc commented 5 years ago

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

wonsuc commented 5 years ago

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 commented 5 years ago

are you on gitter?

GedMarc commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

.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 commented 5 years ago

Phew! :)

GedMarc / layout

Weird behavior in IE #10