Dialog: Content shrinks on resizing when box-sizing: content-box
Daniel-Garmig opened this issue · 3 comments
Dialog content shrinks when dialog have scrollbars and is resized.
This is a similar problem as in #1979 and #2083.
It was marked as solved in jQueryUI 1.13.3 but it still happen on some cases (when box-sizing: content-box).
I have done the following tests:
| jQueryUI Version | box-sizing | Work status |
|---|---|---|
| jQueryUI 1.13.2 | border-box | ❌ Error |
| jQueryUI 1.13.2 | content-box | ❌ Error |
| jQueryUI 1.13.3 | border-box | ✔️ Working |
| jQueryUI 1.13.3 | content-box | ❌ Error |
Bug only seems to happen on Chromium-based browsers (tested on Chrome 127.0.6533.89 and Edge 127.0.2651.86). It works fine on Firefox (tested on Firefox 128.0.3)
Sample fiddle: https://jsfiddle.net/67j9nm43/1/
Fiddle uses jQueryUI 1.13.3. You may change box-sizing between border-box/content-box to test both cases.
I know this is kind of a edge case, as most people today uses box-sizing: border-box, but some old projects may still use box-sizing: content-box as it is the default option.
Thanks for the report with a clear test case! Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.
I'm working on a fix for this. I will make a PR soon.
Here I give some more details about what I found.
It's a weird case when scrollbars are visible on Chromium browsers. It's like size is reserved for the scrollbar so content size is reduced.
The problem is that this behavior is different between Chromium based browsers and Firefox.
I have make the following test case:
Chrome 127.0.6533.119:
Firefox 129.0:
This is the test case if you want to try by yourself.
https://jsfiddle.net/ps57bvn6/3/
As you can see in the code, I'm using jQuery ".width()" to get element width on JS. But I believe jQuery is working just fine and it's a browser thing (as can be seen on the images).
I'll like to hear some opinions about it!
We had this reported at PrimeFaces as well: primefaces/primefaces#11476