Issue metadata
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 descriptionSteps 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
,
Apr 4 2017
Using Chrome 57 on Android, I don't see any scrolling problems. I can scroll up without issues.
,
Apr 4 2017
I have Samsung Galaxy j5 Chrome version 56.0.2924.87
,
Apr 4 2017
Can you try Chrome 57, the current stable version?
,
Apr 4 2017
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
,
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
,
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
,
Apr 4 2017
try it here: http://jsbin.com/qavekojolo not on the old link
,
Apr 4 2017
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.
,
Apr 4 2017
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
,
Apr 6 2017
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.
,
Apr 6 2017
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 |
|||||||||||||||||||||||||
Comment 1 by vnexs...@gmail.com
, Apr 3 2017