New issue
Advanced search Search tips

Issue 707888 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 625199
Owner: ----
Closed: Apr 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 3
Type: Bug



Sign in to add a comment

calling .width() (jquery) on hidden div scrolls (top) to the div

Reported by vnexs...@gmail.com, Apr 3 2017

Issue description

Steps to reproduce the problem:
you can try it here: http://jsbin.com/zutuqajuwe

1. on an android phone using chrome browser (ff is ok)
2. scroll all the way down
3. scroll a bit up ( to trigger resize, and call .width() on the hidden div)

What is the expected behavior?
it should scroll just a bit up

What went wrong?
the page jumps up to the hidden div that we call .width() on 

Did this work before? N/A 

Chrome version: 56.0.2924.87  Channel: n/a
OS Version: 6.0.1
Flash Version: 

only a problem on android chrome, works on android ff, and windows chrome
 

Comment 1 by vnexs...@gmail.com, Apr 3 2017

if the display:hidden is on a parent div, the bug doesn't happen, so you have to call width() on a div that has style display:hidden

Comment 2 by rtoy@chromium.org, Apr 4 2017

Cc: rtoy@chromium.org
Labels: Needs-Feedback
Using Chrome 57 on Android, I don't see any scrolling problems.  I can scroll up without issues.

Comment 3 by vnexs...@gmail.com, Apr 4 2017

I have Samsung Galaxy j5 
Chrome version 56.0.2924.87


Comment 4 by rtoy@chromium.org, Apr 4 2017

Can you try Chrome 57, the current stable version?
Project Member

Comment 5 by sheriffbot@chromium.org, Apr 4 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "rtoy@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by vnexs...@gmail.com, Apr 4 2017

it wasn't working for me now as well, seems that jsbin works for 1 day for free now, so 1 copy pasted the code into a new one
try it here: http://jsbin.com/qavekojolo

I will try to update my chrome

Comment 7 by vnexs...@gmail.com, Apr 4 2017

ok, I updated to 57.0.2987.132
and still getting the problem

scroll all the way down, and slowly scroll a few times up (very small scrolls),
try it a few times

you'll notice how it jumps up

Comment 8 by vnexs...@gmail.com, Apr 4 2017

try it here: http://jsbin.com/qavekojolo
not on the old link

Comment 9 by rtoy@chromium.org, Apr 4 2017

Components: -Blink Blink>Scroll
Yes, I see some jumping around now.  At first I thought it was caused by url bar scrolling down and back up, but that doesn't seem to be the case.  And it jumps when I remove my finger from the screen. Until then, it scrolls smoothly.
when you scroll up resize is triggered because of the url bar appearing,
and in the resize handler there's a .width() on hidden div, so it scrolls to that div

that div that contains a position:relative, this is also important
Cc: bokan@chromium.org
Labels: -Pri-2 Pri-3
Mergedinto: 625199
Status: Duplicate (was: Unconfirmed)
Ok, had to debug through jQuery source but finally found the issue. It looks like jQuery's width() method changes the display value of the element to 'block' temporarily in order to measure it. When it does that, the element becomes visible and is much wider than the viewport. Chrome notices the content width of the page is increased and zooms out to the minimum-zoom level. This causes the scroll offset to decrease. jQuery then undoes all that so we zoom back in as the content width of the page is decreased again.

You can see visually what happens by scrolling all the way down and then, from DevTools console running: document.querySelector('#testwh').style.display = 'block'. You'll notice the page zooms out.

We do this because we'd like to load wide pages fully zoomed out (this is called "overview" mode) and is mainly meant for desktop pages. It does cause bugs in behavior like this and  issue 625199  for example. It's a little tricky in general, but perhaps we should disable it for pages with a width=device-width viewport meta.

In any case, you can fix your issue by adding minimum-scale=1 to your viewport meta.
I fixed my issue by setting style='display:hidden' on a parent div instead of the div that has width() being called on;

and btw yes I noticed that latest jquery is giving width/height of hidden elements, in the past versions I think it was giving zeroes for hidden, and that was expected behaviour for me; but in this case when the parent is hidden it gives zero for width, so I guess jquery now is trying its best to give the correct dimensions for hidden elements, and probably it shouldn't

Sign in to add a comment