Position - $.position.scrollbarWidth detection causes layout issues

[gaumup]

I think we should add 'css absolute position' to the temporarily <div> which use to calculate scrollbar width to avoid scrollbar appear on document layout. It will cause some unexpected layout bugs such as: some element fall down to next line...

[jquery-ui-potition v.1.10.2] [Line 73] div = $( "<div ]style='position:absolute;left:0;top:0;'''display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" )

[tj.vantoll]

Hi gaumup,

Thanks for taking the time to contribute to the jQuery UI project. Could you please provide a reduced test case that shows the layout bug that you are describing? You can use this as a starting point: ​http://jsfiddle.net/tj_vantoll/KTzQV/.

Thanks.

[gaumup]

Hi tj.vantoll

Please take a look at example which I have done in jsFiddle: ​http://jsfiddle.net/KTzQV/6/

• [Error happened case] Do the following step: 1- Go to link: ​http://jsfiddle.net/KTzQV/6/ 2- Resize window 3- Click on "Show UI Position Block" button on jsFiddle example, you will see the red block fall down to next line

• [No error case]: 1- Go to link: ​http://jsfiddle.net/KTzQV/6/ 2- Click on "Show UI Position Block" button on jsFiddle example => In this case resizing window after that will not cause any errors

My work-around for this issue:

• Solution 1: set body = overflow: hidden
• Solution 2: set temporarily <div> in jQuery UI Position 'absolute' position as I have been post

Thanks and regards,

[tj.vantoll]

Reduced: ​http://jsfiddle.net/tj_vantoll/L9LA3/. I can create the problem without needing the resize and I verified the scroll bar detection was causing the issue.

For a fun workaround you can use:

body > div[style*='display'] {
    position: absolute;
}

In terms of placing position: absolute in the position code itself, my only concern is that it would affect the actual scrollbar width detection. I wouldn't think that it would, but it's hard to say without testing it out.

[gaumup]

Hi tj.vantoll

Thanks for your jsFiddle example(Reduced: ​http://jsfiddle.net/tj_vantoll/L9LA3/). I have noticed this problem before and proposed 2 workarounds as in my comment above. So far, I have tested in Chrome, FF, Safari, IE and it has no affect on scrollbar detection in jquery position code, so I have apply it in my projects now

Regards,

[Scott González]

Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues.

Changeset: 1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af

[Scott González]

Revert "Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues."

This reverts commit 1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af.

Changeset: 0da5f9946d0a87f3bdd47cf8848fd63956e261d3

[Scott González]

Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues.

Changeset: d500e945a46c9e2ce5bbb685661c32b5d3f57d21

[Scott González]

Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues. (cherry picked from commit d500e945a46c9e2ce5bbb685661c32b5d3f57d21)

Changeset: edf36f35ce84a67376d7e9fedd21fc07b38100c0