Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#9291 closed bug (fixed)

Position - $.position.scrollbarWidth detection causes layout issues

Reported by: gaumup Owned by: gaumup
Priority: minor Milestone: 1.10.4
Component: ui.position Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

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>" )

Change History (10)

comment:1 Changed 5 years ago by tj.vantoll

Owner: set to gaumup
Status: newpending

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.

comment:2 Changed 5 years ago by gaumup

Status: pendingnew

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,

comment:3 Changed 5 years ago by tj.vantoll

Status: newopen
Summary: [jQuery UI Position 1.10.2] - $.position.scrollbarWidth() issuePosition - $.position.scrollbarWidth detection causes layout issues

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.

Last edited 5 years ago by tj.vantoll (previous) (diff)

comment:4 Changed 5 years ago by 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,

comment:5 Changed 5 years ago by Scott González

Resolution: fixed
Status: openclosed

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

comment:6 Changed 5 years ago by Scott González

Milestone: none1.11.0

comment:7 Changed 5 years ago by 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

comment:8 Changed 5 years ago by 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

comment:9 Changed 5 years ago by 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

comment:10 Changed 5 years ago by Scott González

Milestone: 1.11.01.10.4
Note: See TracTickets for help on using tickets.