I was editing a webpage template, found out it displays an ugly bug when the pages is visited in mobile devices with chromium based browsers, what happens is that after the page has loaded fully tap on the menu and as you scroll slowly down and up like a couple of cm a piece of the top graphics is mirrored and gets stuck at the bottom of the screen becoming part of the background https://i.postimg.cc/Hs2MCrgs/IMG-20210815-145826-405.jpg , I put a lot of effert and research in finding a solution, appreciate any help thx!!
page template beta1.nfshost.com
VIDEO OF BUG: streamable. com/7psr62 (sorry for space, system lets me write only 2 links, see below for clickable link)
I tested in Chrome on an iphone SE and don’t see the bug. Safari seems ok also.
Unfortunately I don’t have any android devices to test so can’t be much help Im afraid.
The only thing I suggest is that perhaps you hide the overflow on header__bg or increase its height when the menu is open as you cut off the content when the menu is open.
It may have nothing to do with the problem but that’s where I would start looking
Thanks for the video. I’ve tried replicating that on my iphone but can’t seem to reproduce the bug so most likely is a platform specific issue. Maybe someone else in the forums with an android can test for the same bug?
What I suggest with problems like this is to cut down the code rule by rule until the problem stops or re-appears etc.
The first thing I would try is as mentioned in the previous thread and hide the overflow on the header and/or increasing the height when the menu is open.
I also note that you are using html,body{height:100%} but not really using it in your page so I would remove that as a test also. Sometimes on mobile a fixed height on the body means the page can never scroll properly and you maybe running into an issue there.
Another possible area for concern is the overflow-x:hidden on html and body. Generally this is a band aid to fix a problem that wasn’t coded properly. There should be no real reason to hide the overflow on html or body and can indeed affect how the browser works. Elements only overflow if you haven’t controlled them properly in the page. The overflow should be caught on the element it refers to and not on the html or body. I would remove the overflow-x on the body just for testing purposes.
Next I would look at the clip-path rule and comment that out for testing as some browsers still struggle with clip-path.
If none of those has an effect then the next step would be to copy the site to a new page and then really cut down the code so that all you have is the header section and nothing else interfering. Then you can go through the properties one by way and changing/deleting until a trigger can be found.
In the end it may just be a bug with this browser version as I guess you are not using actual Chrome but samsung Internet perhaps? If so try a standard Chrome version.
Have you downloaded any other browsers to test on just to see if the issue is constant?
Sorry but I’m just throwing out ideas. Usually if I can see the problem happening on my device then I have a good chance of fixing it
yes as I wrote it’s a bug that appears in android mobile chromium based browsers, I tried in chrome, edge and vivaldi latest versions and it appears, it doesn’t appear in firefox mobile for android, i didn’t try other mobile OS’s and browsers
Ok. I do notice on my Iphone that the bottom status bar does not disappear when scrolled (which it usually does). There is also a slight bug when you scroll the page up to get the bounce effect and then when you scroll down you can’t scroll anywhere as all the content is cut off.
Both issues are caused by the height:100% and overflow on html and body so i would suggest that you remove the height:100% from the body and test on your device. I’ve a strong feeling that the bug on your device is related to this.
alright, I checked the html file, there is no height:100%, i checked the bootstrap.min.css, i found 2 height:100% i report them here (sorry it’s a free template ccs isn’t tidy):
.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#
bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9
PS: Remember to clear browser cache every time you make a css change or change the name of the stylesheet. Mobile browsers like to hold on to their cache.
Yes that’s the ‘band-aid’ I mentioned in my first post and the developer has tried to hide the issue rather than do it properly.
A quick fix would be to add overflow-x:hidden to the main-wrapper instead of the body and that should band-aid the problem and hopefully not trigger the previous glitch.
The proper fix is to follow the bootstrap guidelines and not change the gutters without changing the corresponding padding on the container. The container usually has 15px left and right padding to create gutters and the first child of a container should be a .row element that has -15px negative margins to drag the columns into the padding space and create the gutters in the middle. Then the next child should be a column element which has its own padding.
In your template the gutters have been changed and in some place you have -50px negative horizontal margins. This -50px is the cause of the horizontal scroll because there was not a 50px padding added to the container to compensate for this. The negative margins now stretch out of the main-wrapper and outside the viewport causing a scrollbar to appear on smaller screen sizes.
If you are still getting a scroll bar showing then try this instead.
.main-wrapper{
overflow:hidden;
}
I also notice that you (or the developer) has set heights on all those sections and that is a bad idea. They should be min-height and not height or the area can never grow or wrap with the screensize. Ideally they would be content height unless there was a reason to add more height (such as a background image needing to show in full).
If you are still having issues I’ll need to see the updated page.
it works,