Problem on using website with html,body overflow tag
Reported by
marco.te...@gmail.com,
Nov 7
|
||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
Steps to reproduce the problem:
Dears Sirs,
I would like to inform you that I have a problem with a website regards the tag html,body and scrolling page. On my website I use html,body{width 100%,height 100%), and up to here there's no problem. But when I watch my website on smartphone elements move and for fix this problem I insert in html,body an overflow-x:hidden. Since one years ago this fix it worked, but now you can't use the website because:
1) if you use overflow-x:hidden in html,body{width:100%,height:100%} you can't use ancor link because the code destroy the ancor position and bring the item out of place in an other position. For example if I click on Home ancor I go at the end on the page instead of the top.
2) If you use overflow-x:hidden on Safari with html,body{width:100%,height:100%) for iPhone, the scroll-page is very slow, it is not fluid.
I'm looking forward to a reply from you.
Best Regards.
What is the expected behavior?
Using overflow-x in html,body and correct ancor position when I click on ancor link
What went wrong?
1) if you use overflow-x:hidden in html,body{width:100%,height:100%} you can't use ancor link because the code destroy the ancor position and bring the item out of place in an other position. For example if I click on Home ancor I go at the end on the page instead of the top.
2) If you use overflow-x:hidden on Safari with html,body{width:100%,height:100%) for iPhone, the scroll-page is very slow, it is not fluid.
Did this work before? N/A
Chrome version: 70.0.3538.77 Channel: stable
OS Version: 10.0
Flash Version:
,
Nov 8
Thanks for filing the issue! @Reporter: Could you please share a sample test file/URL with the conditions mentioned in comment#0, which helps us to triage this further in a better way. Any further inputs from your end may be helpful.
,
Nov 8
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 9
Unable to reproduce the issue on win-10 using chrome reported version #70.0.3538.77 and latest canary #72.0.3605.0 as per comment #0 and #3. Observed that after navigating to url: http://marcoteodori.altervista.org/new2018/ and scrolling the page did not blink and clicking on the Home anchor didn't go to the end on the page, rather it went to top. Attached a screen cast for reference. reporter@ - Could you please check the attached screen cast and please let us know if issue is specific to OS-android. Also please check the issue on latest canary #72.0.3605.0 by creating a new profile without any apps and extensions and please let us know if the issue still persist or not. Thanks...!!
,
Nov 9
Good Morning. You can't see the problem because there are not start the overflow-x in the html,body. Now I have started the overflow and if you try in the homepage to click portfolio and contact you can't go in the ancor tag. Thank you so much.
,
Nov 9
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 9
I have updated my code with html,body{overflow-x:hidden} now, and if you try the website doesn't call the ancor tag correctly.
,
Nov 12
,
Nov 12
,
Nov 16
Retested the issue on reported chrome version 70.0.3538.77 using Windows 10 with the below mentioned steps. 1. Launched Chrome 2. Navigated to http://marcoteodori.altervista.org/new2018/ 3. Tried Scrolling the page Observed smooth scrolling without any issue. We didn't observe the options "Home, Portfolio, photographic services and Contacts" on the top right corner. Attaching the screen cast of the same for reference. @Reporter: Could you please have a look at the screen cast and let us know if we have missed anything in the process. Any further inputs from your end may help us. Thanks!
,
Nov 16
Push the icon on the top-right and link appear . Thanks Il giorno ven 16 nov 2018 alle ore 07:08 vamshi.k… via monorail < monorail+v2.4651767@chromium.org> ha scritto:
,
Nov 16
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 16
Chrome is working correctly here, this is a bug in the page. Explanation: When you remove overflow-x, <html> and <body> both have overflow: visible by default. This means any overflow is _viewport_ scrolling. You can see this by scrolling the page and observing window.pageYOffset - it changes as you scroll. When you add overflow-x to _both_ <html> and <body>, overflow-y must compute to 'auto' as per spec [1]. This means both <html> _and_ <body> scroll overflow in the y direction. What this means is that the <html> scrolls like the viewport, but because <body> is 100% the height of <html> there is no viewport overflow. <body>, however, does have overflow. When you scroll the page, you're actually scrolling a box established by <body>, not the viewport. You can confirm by seeing that window.pageYOffset remains at 0 as you scroll. document.body.scrollTop is changing. This is as if you had a <div style="overflow: auto"> with all your content in it. The bug comes now comes because JQuery's offset() method returns the element offset from the _document_. For example, click on "Contatti" - the <body> scrolls to it. Click on it again and it scrolls to the top. When the "Contatti" <div> is in view, its offset from the _document_ is 0 because its in view and the _document_ has no overflow/scrolling. The simplest solution is to set overflow-x on <html> only. This means <body> won't establish a scrolling box and so scrolling will occur on the viewport. offset() will return the expected value. However, if I may make a few suggestions: - Chrome and Firefox already support scroll-behavior. By setting scroll-behavior: smooth on <html>, you don't need any additional script, simply navigating to #contatti will smoothly scroll to it. - You mention you added overflow-x because otherwise the page would jump around when scrolling. I don't see this issue anymore when I remove the overflow-x. I suspect this occurred because the URL bar was showing and hiding. If your elements were sized using vh units they would change size. This might make the page zoom out as it becomes wider (Chrome zooms out so that the user doesn't have to horizontally scroll content). There's more details here: https://developers.google.com/web/updates/2016/12/url-bar-resizing [1] https://www.w3.org/TR/css-overflow-3/#overflow-properties
,
Nov 20
Thank you so much for your support. I have tested how he said but i have the same problem... I have tried to use Vh and Vw as measuring element instead of % but the problem remain. I have tried to put the overflow-x only in html but the problem remain and elements move on the page when you scroll on mobile or in iPad (for example i have an Ipad 2, it's old but i see that the element move on scroll. For example if i use safari on my iphone and on my iPad i don't have this type of problem. I find this problem in two conditions: 1) if I remove the overflow-x on html,body tag, elements don't move but the ancor link don't work. On Safari it works. 2) If I use overflow-x on html,body tag, elements move but ancor links work. He said me that i can use scroll-behavior: smooth on html, it's very useful, but if I use javascript i can control and modify the % of margin about the scrolling. For example i have used target.offset().top - navbar.offsetHeight; For resolve my problem i would like to ask you if there is a solution to avoid that the url bar can hidden when you are scrolling. As you can see the code now is identical when I have wrote this problem because i have tested on another page to fix the problems. If I use new device, for example Android Phones, that can update the google chrome, problems it makes resolved. But if I use old Android Devices as Samsung Galaxy Note 4 or all devices that can't support the last update, elements move. Regarding Apple,using Safari i don't have this type of problem. But if i try on Chrome or Google with ipad2, or with old iPhones, the problem remains. I don't know how to do anymore. I look forward to receiving your answer. King Regards.
,
Dec 6
> I have tried to use Vh and Vw as measuring element instead of % but the problem remain. Both vh and % (I think) will resize as a result of the URl bar if they're position: fixed. > I have tried to put the overflow-x only in html but the problem remain and elements move on the page when you scroll on mobile or in iPad (for example i have an Ipad 2, it's old but i see that the element move on scroll. Can you put up a link I could try? It'd be easier if I could see why the elements resize > He said me that i can use scroll-behavior: smooth on html, it's very useful, but if I use javascript i can control and modify the % of margin about the scrolling. For example i have used target.offset().top - navbar.offsetHeight; An improved way to do this is the new 'scroll-margin' property. If you add, say scroll-margin: 100px to your link, when you navigate to fragment or use scrollIntoView it'll stop 100px from the screen edge. > For resolve my problem i would like to ask you if there is a solution to avoid that the url bar can hidden when you are scrolling. You can put all your content in a scrolling <div>. That's not great UX though and it may not work in the future as we're experimenting with letting <div> also move the URL bar. |
||||||||||||||
►
Sign in to add a comment |
||||||||||||||
Comment 1 by vamshi.kommuri@chromium.org
, Nov 8