I'm working on webpage for iPhone devices. This page has a div with overflow property set as below to implement native scrolling provided in iOS5.
.nativeScroll {
-webkit-overflow-scrolling:touch;
overflow:auto;
height:200px;
}
With above CSS style, scrolling is working fine. But scrollbar appears only when user touches the div and tries to scroll. Now the problem when untouched the scrollbar disappears which is default implementation. In this case, it looks like the div doesn't have any overflow content. So user may never bother to scroll.
So is it possible to make scrollbar always visible whether or not the div has touch?
Thanks
IMHO, I think there is no "clean" way to do it. But, you can use a third party lib like iScroll.
On the homepage, you can find a reference to the hideScrollbar. Its default value is true. You can set it to false for your needs.
Related
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
I have a problem with overflow:hidden on a touch device.
Basically I have my html and body on overflow:hidden. With a contact form outside(bottom) of the window. On clicking a button this form will animate in. This is so far working great on desktop browsers.
But on touch devices, I seem to be able to scroll down and view the form. I can't seem to find solutions after much googling. Is there anyway to force overflow:hidden on touch devices?
Any help much appreciated!
Use display:none
display: none removes the element from the page, and the flow of the page acts as if it's not there at all.
The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
I have vertical scroll bar inside of my web page. When i run this web site in iphone, I have to use two finger to scroll the content. Is there any way to fix this problem? The content needs to be scroll by using single finger.
I have a code like this
<div style="height:600px; overflow:scroll">
Content goes here
</div>
You can use a scrolling library like TouchScroll or iScroll. iScroll has more features, but having tried both in a production application, I found TouchScroll performed more reliably.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.