I would like to find a solution for the following behaviour.
If you go to the next link example page and change to the mobile view in the developer tools, you could see that for some of the devices that you can choose the toolbar hide partially on scrolling down. Even the view creates a margin in the right side of the page that can be shown scrolling laterally.
I can not find who is causing the issue. I have checked the sizes of every single div in the page even for hidden div. I don't know if the issue is related with the property fixed in the css.
Here you can see what I mean, the toolbar is hidden when scroll down and if you scroll laterally some small margin appears.
Perhaps not a direct fix, but the Firefox inspector has a 3D mode that is actually very helpful in finding the offending elements in these cases.
You can solve it with the following edits:
.slick-prev: {left: 0;}
.slick-next: {right: 0;}
.container{padding: 0;} (inside of ".main-banner" one)
Related
I have one ul tag with max-height: 180px and overflow: auto styles.
This ul will have more li tags added dynamically (something like add li upon button click).
Issue: I can perfectly scroll list items if more li tags are added which doesn't fit in the max height of container. But, this is happening only in desktop. When I try same from my mobile chrome browser, it doesn't scroll.
Tried following, but no luck:
z-index, value is some 1000000 or above.
overflow: scroll, overflow-y: scroll, overflow: auto
overlapping by other elements, none
<body> tag had overflow: hidden, tried removing that, too
Question: What more should I debug? Couldn't find many solutions/documentations around this.
Sharing repro steps below, but, do not wish to get direct solution from your efforts. Only need some pointers to proceed.
Here is my test site with repro: https://interesting-my-store.myshopify.com/products/15mm-combo-wrench , open this page in mobile and click on red button with heart icon in it. A modal will pop up. Click "Create new collection" some 10 times and you will see that list won't scroll in mobile. But if you use desktop or use desktop debugger, it will scroll.
Found fix myself.
Issue was: Scroll was blocked with preventDefault() somewhere in my code.
Debugging: Found issue by adding "touchmove" event to my div container. Logged event data when I scrolled from my phone (via USB debugging on desktop). It showed me defaultPrevented: true. Thats where I realized preventDefault might be causing it. Looked for it in my code, and found that I had applied preventDefault on touchmove event at one place.
Removed that preventDefault and tried again and it worked.
Lesson learned:
If UI can be scrolled in desktop, it will be too in mobile unless blunder like above. No separate css or JS needed for scroll on mobiles.
If CSS is not giving away anything, go and look in JS too and don't ignore it thinking what JS has to do with touch screen.
I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.
The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.
I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.
bodyEl.style.height = window.innerHeight + 'px';
It may be the case that this area is not usable for interactive content.
Here is a demo with code:
http://plnkr.co/edit/327sUQ?p=preview
You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.
Update:
It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.
I may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:
overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
in addition to your height: 100% (which forces the content to fill the viewport)
appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.
I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.
First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.
Nethertheless, I try to explain what I've found out (until we decided to not bother anymore).
The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.
Btw.:
There's another (similar) problem with the iPhone 6 plus (not fixed yet).
If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.
I know this question is a bit old, but since the issue still exists I thought I should share my experience...
As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.
So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!
Another workaround would be to simply make the button/bar float 44px from the bottom.
"If it's stupid, but it works... it ain't stupid..." ;)
I am developing, just for fun, a jQuery plugin that reveals elements from a "stack" as you scroll down the page.
Github repo is here - https://github.com/JayBizzle/Reveal
Demo is here - http://jaybizzle.github.io/Reveal/
Everything works great in Chrome, but when testing in Safari I am seeing some weird rendering issues.
If you view the demo in Safari and scroll down fairly quickly, you will notice white gaps appearing between the coloured DIVs.
Even stranger is, if you then inspect one of the out of position DIVs, the inspector highlights the DIV in the correct position. Also, if whilst your in the inspector, you change one of the elements CSS attributes, like adding a border, the page gets redrawn and the element appears in the correct position.
Anyone got any ideas if this is a Safari bug, or something i can overcome with some little known CSS?
I had a similar issue.
My workaround was giving position static first and then relative with a bit of delay.
$(elem).css('position', 'static');
setTimeout(function() {
$(elem).css('position', 'relative');
}, 1);
What is this "Jerking" - On this page scroll right to the top, then if you're using a mac use two fingers and scroll up more... the page will scroll further up (page moves downwards) revealing a gray area and bounce back up after you lift your fingers off the touchpad.
Question is how do i prevent this "jerking" effect with CSS or JavaScript?
I know it's possible because if you go to facebook or pinterest and click on an image you get a lightbox. In that lightbox "mode" you won't get this "jerking" effect.
I initially thought it's something to do with lightboxes or css fixed positioning but even in http://lokeshdhakar.com/projects/lightbox2/ "mode" it still "jerks". How did fb and pinterest do it?
ps. use chrome or safari. firefox doesn't have this effect.
Facebook seems to accomplish this by setting the CSS attribute "overflow: hidden" on the document body when a picture is displayed. I just tested it myself by adding the following CSS to an HTML file and the bounceback scrolling was disabled.
<style type="text/css">
body {
overflow: hidden;
}
</style>
Of course, this will prevent your page from scrolling at all. I agree with Quentin, this is standard UI behavior and you shouldn't change it unless you have a good reason.
I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.