#9291 closed bug (fixed)

Opened May 14, 2013 02:39AM UTC

Closed May 16, 2013 10:26AM UTC

Last modified November 26, 2013 03:14PM UTC

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

Attachments (0)
Change History (10)

Changed May 14, 2013 03:07AM UTC by tj.vantoll comment:1

owner: → gaumup
status: new → pending

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.

Changed May 14, 2013 04:46AM UTC by gaumup comment:2

status: pending → new

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,

Changed May 16, 2013 01:53AM UTC by tj.vantoll comment:3

_comment0: 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. \ \ → 1368669241135530
status: new → open
summary: [jQuery UI Position 1.10.2] - $.position.scrollbarWidth() issue → Position - $.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.

Changed May 16, 2013 03:25AM UTC by gaumup comment:4

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,

Changed May 16, 2013 10:26AM UTC by Scott González comment:5

resolution: → fixed
status: open → closed

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

Changed May 16, 2013 10:26AM UTC by scottgonzalez comment:6

milestone: none → 1.11.0

Changed May 16, 2013 12:34PM UTC by Scott González comment:7

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

Changed May 16, 2013 12:34PM UTC by Scott González comment:8

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

Changed November 26, 2013 03:13PM UTC by Scott González comment:9

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

Changed November 26, 2013 03:14PM UTC by scottgonzalez comment:10

milestone: 1.11.0 → 1.10.4