We have fixed the button on bottom of page in RWD mobile using position: fixed. Working fine in Android device, but flickering in iOS device while scrolling. We tried the following to the element fixed. None of them worked. Any solution for this issue?
transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;
Try to remove the fixed element from the container that has -webkit-overflow-scrolling and put that somewhere else.
Related
Using an iPhone iOS10 in Safari, I can scroll the page and overflowed elements fine at 100% zoom.
When I zoom in, I can no longer scroll overflowed elements. The page is scrolled instead.
It appears that this issue occurs more frequently the further I've zoomed in. If I only zoom a bit, it happens less frequently.
I am using -webkit-overflow-scrolling: touch; Removing that property will cause undesired jumping on scroll.
I've tried adjusting the element's height to 100vh vs auto vs window.innerHeight, adjusted the z-index, set it to position:absolute;
Nothing is working! Again, this only happens on zoom. Scrolling works fine at 100%.
I've seen previous threads on this issue but no solutions so far:
iOS 8 Safari - Can't scroll element's content when page is zoomed
Is there a workaround for bug in Mobile Safari: Pinch to Zoom results in random scrolling blockage?
Issue scrolling div with Safari on iPhone 6+, iPad 3 when zoomed in
Demo http://jsfiddle.net/11ec63xj/1/
Try to open above demo in iphone (ios), the scrolling is not smooth at all. Later I learned to use
-webkit-overflow-scrolling: touch;
but it broke the parallax effect. Any hack to make this smooth?
I have an app on the store which is built using Ratchet framework. It used to work fine, until iOS 8 was released. Now when I test it on iOS 8, title bars for modals won't appear. All the controls like Close, Back buttons on the bar work when I click, but the bar and the controls on it are not visible. This happens only on iOS 8, works fine on iOS 7 and older versions.
To reproduce this bug, please open this sample app http://goratchet.com/examples/app-android-notes in Safari on an iOS 8 device or simulator, and then click on New note button to open a modal.
I've noticed while debugging it in Safari's web inspector that if I move the bar <header>...</header> element of the modal to somewhere else and then bring it back to its original position, it appears. Or sometimes, changing its display property from block to none and then back to block works. Or sometimes if I scroll the page.
Any solution will be highly appreciated
Seems there is an issue with position: fixed in Safari as discussed in this SO question: Mobile safari position:fixed z-index glitch when scrolling
You can fix it by adding this rule to your CSS
header.bar.bar-nav {
-webkit-transform: translateZ(0);
}
You can track the issue on Ratchet's Github repository here - https://github.com/twbs/ratchet/issues/679
You should try position:sticky;. It's made to deal with position on Safari. fixed has been an issue with mobile devices for years. I thought it was fixed but iOs8 has weird behavior too...
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
I am using shadowbox to display content in a pop-up window. When the content is longer than the screen size, scrolling appears in all PCs and Android device but it does not appear on any Apple devices (Iphone, Ipad, Ipod)
Can any one help me?
I know it's a bit of a late reply but I have just had the same problem and I though I would share my solution just in case it was helpful.
I created a scrollable div using css
overflow-y: scroll;
within the shadowbox frame and this enabled the content to be scrollable on the ipad.
Try this so it doesn't create double scroll bars on other devices target the iDevice.
$(window).load(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#sb-body-inner').css({
'overflow': 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
}
});
We are writing a Cordova/jQuery Mobile app, and coming across an issue with iOS (both 6 and 7). The problem is that CSS is sometimes in iOS is not being applied, even though it should be. The problem is both in the emulator and device itself.
For instance:
A background-color: red is displayed as white.
An element with overflow:scroll (both with and without -webkit-overflow-scrolling: touch) cannot be scrolled.
It's not an inheritance issue - the same CSS works fine in desktop FF, Chrome, Safari, IE and in Android. It also works fine using Safari remote inspection - the style won't be displayed initially, but simply un-checking and then re-checking the property in the Safari developer tools makes it work normally !
I have not be able to isolate what causes this problem, but when it happens it happens consistently. Is there a fix for this problem ?
It should work fine for iOS6. You can try using hexadecimal code for background color and add
-webkit-overflow-scrolling: touch; for smooth scrolling.
For iOS7 the bellow link may help you.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review