My website competitionmantra.com works fine on mobile while scrolling down.
But, on desktop it does not scroll.
Here are two screenshots of it.
To start with I can scroll when all the JavaScript eventually loads it prevents the scroll so I assume its to do with one of those JS files you have implemented, which there are an insane amount of by the way!
Easy fix is the adding:
height:100%;
to the body tag in the CSS
I added height:100% onto your body and it worked
Related
So I'm currently working on http://coin.codeclimb.com and for some reason the owl carousel slider on the homepage is not working on iPhone safari. When I slide on iPhone it is swiping ALL the content on the whole page and breaking things. I can not replicate the problem on desktop. Therefore I can not use dev tools to identify the problem.
It's as if there are 15 slides when there is only 2, it just keeps letting you slide and the more you slide, the further it pushes all the content on the entire page, including the navigation.
Any ideas whats going on? I am using Safari on iPhone 7 Plus.
You have a couple of issues here:
overflow-x:hidden does not work on the body element in certain versions of mobile safari. This means that your content is spilling horizontally out of its container. This confuses the browser as it does not know which element it should be scrolling.
You have removed overflow:hidden from line 77 of owl.css, and added lines 1121 to 1134 of your style.css file, directly affecting the functionality of OwlCarousel.
The easiest solution is to add overflow-x:hidden to the html element instead of the body element, and remove your extra lines from style.css
In my case, even overflow-x: hidden on html element didn't work.
Instead, I added extra padding on body (20px on both sides) which solved the issue and worked fine for me even on small screen devices (iphone SE)
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
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.
I've got a DIV whose contents are about 2000 pixels wide. The DIV is maybe 150 pixels high and doesn't scroll vertically (or need to). However I do need it to scroll horizontally. This does happen... on iOS 5.0. On iOS 4.3 for some reason it isn't working.
The pertinent CSS for this DIV seems to be:
overflow:scroll;
margin:0;
height:auto;
Can anyone explain how I can make this scroll properly on 4.3?
Thanks.
overflow: scroll is only supported in iOS5+. That's the long and short of it.
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5
You could mock the feature by using a library like iScroll, but I don't recommend it. The scrolling performance is terrible and memory usage is unacceptable.
Check out https://github.com/richardscarrott/jquery-ui-carousel, he's implemented a simple and straightforward plugin for scrollable carousels that seems to work just fine in iOS.
In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.