I'm having an issue with scrolling being somewhat temporarily disabled on mobile iOS devices within a fixed position element. The issue is somewhat described (but not answered) here: iOS scrolling with fixed position
I've searched everywhere, but it seems my issue is somehow unique, as none of the solutions helped (such as setting the elements to absolute instead of fixed, or setting -webkit-overflow-scrolling to touch. I've tried all solutions posted here: Scrolling issue on position fixed element on iOS)
The website I work on is currently live with the issue, so I can easily provide a codebase to test: https://finanztip.de
If this page is opened in an iOS device (all other browsers and OS's are fine), when the navigation is opened and scrolled (usually I can reproduce it by scrolling to the bottom of the container and attempting to scroll back up), sometimes (not always) the scrolling is disabled and the user can't continue scrolling for a while.
I assume it has something to do with the scrolling context. The iOS device is trying to scroll in another element/context other than the one I need it to scroll in, and while it attempts to scroll somewhere else, it doesn't scroll in the context I need it in (in my case I want the div with the class "vertical-scroll-container" to be scrollable). If I remove the class "vertical-scroll-container", it scrolls just fine.
I have a video of the issue, but I can't upload it to stackoverflow, so I'll send it to anyone interested, or I might upload it somewhere and link it.
I'm not sure if I provided enough information to understand my situation. In case something's missing just let me know.
EDIT: Here's the video: https://www.dropbox.com/s/wh4oe99f5tlxzjs/ios-scroll-issue.MOV?dl=0
I have a html site which works well on any device which uses a mouse or scrollwheel. However when I test on mobile, my site scrolls smoothly for a certain amount of time, and pauses at the bottom of a section as if it has reached the bottom of the page.
After about half a second the site works as usual, but if I scroll back up the page the same issue occurs.
I have tried adding webkit-overflow-scrolling to all classes and most of the resolutions to this problem I find are based on this methodology. But It's not fixing things in my case.
If it helps, when I scroll to the point where the site pauses, chrome's (mobile) toolbar disappears as if I have reached the bottom of the page and swiped it away.
On horizontal resize my webpage becomes bugged, in particular at the breakpoint of 993px. 993px is defined in fullpagejs as the responsiveWidth:
responsiveWidth: '993'
Resizing on the first page of the website won't cause the bug, however resizing past the breakpoint(993px) on any other page causes the top pages to dissappear from the browser window.
Reloading the page will fix the bug, so I could reload the page every time the window is resized past the breakpoint(993px). However, I'm wondering if there's a better solution.
I am not sure if it's allowed but here is the link to my webpage so you can see for yourself:
http://forgetthe.fish/
In addition to fullpagejs I'm using bootstrap for the lay-out.
I am a complete novice when it comes to website design, but have the task of designing a website for an academic conference. I wanted to design a functional site to which I understood the code behind it. I have managed to do so, but am now having problems with viewing it on a smartphone. When I have checked the website on online simulators such as brick and mobile is seems to work fine. However, when colleagues of mine with smartphones try looking at it, the main content area will not scroll. Does anyone know of a way to resolve this. The url to the website is:
Conference Website
Edit: The problem appears to be on android phones. If you zoom in a tiny bit you can then scroll alright, and if you move to a portrait view rather than a landscape view it is fine, but it will not scroll on a landscape view on an android.
You might want tot try adding viewport meta to your header, ensuring every device sees your site at the optimal width (this eliminates the user having to zoom in on most mobile devices).
You can find some good information for this in the following article: http://www.html5rocks.com/en/mobile/mobifying/
There are some zooming issues with the website on a Samsung Galaxy S2. This has mostly to do with your menu, which is set to 21%.
Furthermore you're setting height on a lot of elements to 100%. You might want to look into that as well.
I'm working on putting together a liquid style-sheet and it works wonderful. One thing that I've noticed is that my browser window in Chrome won't resize below 400px it just gets stuck there and in FF as I scale down it it just stops at around 400px and then pops a horizontal scroll bar.
When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.
I was curious if anyone knew if this was a browser/desktop thing or if I should be looking at something other than my CSS. I don't have any min-width declarations so i'm not sure what could be causing this.
Again on desktop it scales down to a min-width of about 400px and stops, but when I open it up on my phone it scales to the size of the phone screen which is roughly 320px... curious why at the very least it won't scale down to the 320px on desktop.
-edit-
Also I'm not sure if this matters but Opera allows it to scale down to pretty much nothing... So it works with Opera and not in Chrome or FF... any ideas?
Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:
Dock the web inspector to the right instead of to the bottom
Resize the inspector panel - you can now make the browser area really small (down to 0px)
Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.
The HTML and CSS panels fit really well and you even open a small console panel too.
This has allowed me to completely move from Firefox/Firebug to Chrome.
If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.
UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/
this may be because of the addons you installed on your browser. remove or hide all addon icons from the tool bar and try re size. when there are addons browser only resize the address bar and keeps the addons visible.
Update: 7/14/2013
With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.
I was stumped as well but ended up with a simple solution. I just created a HTML file with a link to open a new window:
Open!
This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.
nayan9's solution works great, and can be put into a bookmark without having to create a html file. In Chrome, create a new bookmark with URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
And give it a name of "Open Small Window" or something similar. This will allow you to easily open windows without size restrictions within chrome. Note that just copying this into your address bar won't work - chrome strips the "javascript:" out.
In case you want to reduce your screen width to emulate different devices (and why else would you want to do this?):
Chrome now has an Emulation section in its inspector, activated by clicking the little phone icon in the top menubar (between the magnifying glass and Elements):
Emulation mode allows you to set the viewport size to all common mobile screen sizes, among other nice features, like emulating touch, geolocation and even accelerometer input:
Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D
javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
in chrome the icons of your addons in the top right corner cause the problem
-> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)
or disable the icons
The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.
To use the emulators open DevTools (press F12) and then click on the following icon to toggle the Device Toolbar:
This will then allow you to emulate whichever mobile device or viewport size you want to.
I found a quick workaround for this.
Just install the Responsive Web Design Add-on to Chrome, and it will open a separate window without the address bar and tabs, which can be scaled down to 10 px or less.
Link here: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
I've been experiencing similar issues and just found a good work around. Open up your chrome devtools and in the top left, there's a little screen and ipad icon. Click that and it opens a mobile view of your page. You can set it to predefined devices or a custom resolution. Pretty nifty actually.
Another easy solution is to click Strg+Shift+N to enter Incognito Mode. There you can resize your Browser window as you like.
I like this tool because it lets you switch quickly and also switches between portrait/horizontal easily for mobile sizes. It also allows you to make a personalized bookmark let, so if you design for obscure resolutions frequently, you can save them and use them.
I had to use one of these tools because even with the above answer I couldn't get my window to scale to 320 properly, this tool seems to be a faster solution overall.
http://lab.maltewassermann.com/viewport-resizer/
I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...
For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens.
For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.
This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
Now to answer:
Safari, has this cool feature.
You need to activate safari developer option in preferences.
Screenshot of setting up preferences in Safari to activate developer menu
Once activated you can access bunch of very powerful developer tools.
One of this tool is Viewport adjustment which can used to test your website responsive layout.
To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R
to activate safari view port adjustment option.
This will give you enough control to test your website on various view port sizes.
Screen shot of how your browser window will look once responsive layout test option is activated.
Link to how to activate developer menu in safari:
https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
A lot of smart phones scale the page to fit into their screen size using zooming. Your minimum page width is probably 400px. Without any example code, I think that's all that can be said.