This page is giving a horizontal scroll on mobile devices, but it shouldn't. Also when I'm testing it offline, it is working fine. even Chrome simulator is showing fine. As soon as I put it in github or anywhere else, it's getting this horizontal scroll. Please help me to spot what is causing it. Thanks.
https://bluebugx.github.io/public-assets/
Related
I have .. strange problem with website background, elements via scrolling in mobile view (Opera browser, Chrome the same):
they are shaking! I didnt know how to describe such problem so made a video
On mobile phone normal behavie (without shaking), check several different phones.
Source code
What is it???
I don't even know the reason.
I am building a website which works fine on browsers on a laptop but when i start using the same on a mobile browser, i see that the only thing I am able to do on my mobile browser is to double tap to zoom in and be able to click and type.
I am not able to scroll or move the web page around to change the view port.
Has someone experienced the same problem before?
I am using bootstrap for this and the layout is responsive.
Please help.
Thank you
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!
Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.
Unable to scroll pages vertically on Google Chrome "12.0.742.100", using the scroll-bar thumb, however I can use mouse scroll and also scroll the page using the up and down arrow keys.
Important points:
If I re-size the window such that there is a horizontal scroll-bar, the vertical scroll-bar starts to works fine, but if I re-size/there is no horizontal scroll-bar, the vertical scroll-bar thumb fails to work.
If I stop loading the page/try to scroll while the page is loading, it works fine.
The issue is reproducible on almost all the pages of my client's website "http://www.charlotterusse.com/", like:
http://www.charlotterusse.com/home/index.jsp
http://www.charlotterusse.com/category/index.jsp?categoryId=4078197
http://www.charlotterusse.com/family/index.jsp?categoryId=4335463&cp=4078197
http://www.charlotterusse.com/category/index.jsp?categoryId=4238904
http://www.charlotterusse.com/category/index.jsp?categoryId=4238909&cp=4238904
but, the following pages scroll just fine:
http://www.charlotterusse.com/sitemap/index.jsp
https://www.charlotterusse.com/checkout/index.jsp?process=login
http://www.charlotterusse.com/helpdesk/index.jsp
http://www.charlotterusse.com/storeLocator/index.jsp
http://www.charlotterusse.com/giftCenter/index.jsp
It may be due to some conflict with Flash or JavaScript, but the site works fine on all other browsers and not chrome.
Please advice what could the issue be and how can it be fixed.
Ultimately found the solution for this issue. There was a JS code which was hindering the normal mousedrag actions.