Just want to ask if anyone knows how to fix a bootstrap carousel glitch on iPhone devices, it autoplays but the slide is glitchy or something, it double slides per item. Only at iPhone X-11 / safari browsers. Works fine on chrome and desktops. Thanks in advance!
fixed the blinking (but the slide animation from right to left will not work - slides just appear):
.carousel-item {
-webkit-transform: translateZ(0); -moz-transform: translateZ(0);
}
related to: Bootstrap 4 Carousel is blinking during transitions on safari browser
Related
My webpage at www.rlhismgraphicsltd.net moves around on iPhone and iPad. I've made it responsive and it doesn't move around on desktop but does on iPhone and iPad. The container I made is 100% width and max-width so it's supposed to stay contained within the viewports parameters. The page wanders and scrolls horizontally on iPhone and iPad. I used overflow:hidden and it does not prevent the page from wandering left and right on iPhone and iPad. If anyone has an iPhone or iPad you can check it out. I've opened the page on an android phone and it does not wander. I've inspected the page on Chrome and it doesn't move around like it does when I look at it on my iPhone and iPad. I can not figure out what the problem is.
I thought maybe padding and margins may be an issue but I can't really tell what may work because it is fine when I inspect the page on chrome. Once I look at it on my iPhone and iPad i get horizontal scrolling and it moves diagonally and doesn't stay within the viewports parameters.
Safari mobile.
If i scroll sidebar, it is doing very quickly. But if I try scroll Dialog content, it is doing very slow and sometimes scroll background instead..
I wrote video, where you can find that effect.
https://yadi.sk/i/VXgqHfW83YbbN3
Does any solutions for this situation?
To make the Dialog content scroll normally on iOS, you have to add -webkit-overflow-scrolling: touch; to the CSS.
The background scrolling when you don't want it to is a bit of a harder problem, but you can find some more information here: iOS - css/js - Overlay scroll but prevent body scroll
Here are some steps to mess up the iPhone's rotation when in Safari
Holding the phone in vertical mode and navigate to google.co.cr with Safari
Rotate the phone horizontally
Rotate the phone vertically
The page is clipped as seen here:
A simple horizontal swipe will bring it back.
This is not a problem with google.com, only with google.cr.co, but it illustrates the problem I am having.
Oddly enough, if you do the search from the Google Search box in the Safari Header, this resizes back to normal.
My web page has the same problem when following the same steps... it gets clipped.
How can I fix this?
Simply reset the viewport on orientation change.
window.addEventListener('orientationchange',function() {
if(window.orientation === 0) {
window.scrollTo(0,0);
}
},false);
Currently I am using a vertical scrollbar for a div when the contents are larger than the height of the div. This works great on Chrome, IE 7(!) and Firefox.
However, on IOS devices like iPad and iPhone there are no scrollbars for divs. What is the recommended solution? For simplicity, I want to run the same code on all platforms: Chrome, IE 7+, Firefox, iPhone and iPad.
Thanks!
Actually there is an in-element scrollbar in iOS, it's just hidden until it's in use :( You use a two-finger drag to activate an element's scroll.
I don't think you can override the OS hiding the scrollbar, but overflow-y: scroll; in css is mostly likely what you want.
I'm using jqTouch inside a UIWebView of my native iPhone application and many of the pages have very weird "tap-jump" issues.
About 75% of the time that I access a page if I scroll down a bit, and just tap anywhere on the screen, it jumps to the top of the page. If I open that same page in the iPhone Safari browser, it works great every time and no "tap-jump" issue. So it appears to be an issue ONLY within the UIWebView.
I've been spending hours and hours trying different things to figure out why this is happening and I welcome any ideas.
Thanks,
John
It is expected behavior for jQTouch to scrollTo(0,0) on slide left/right navigation. Of course, this will only create a noticeable effect if you tap a link while the page is scrolled (i.e., if the page isn't scrolled, it can't jump).
I don't know why you'd see a difference between UIWebView and Mobile Safari, unless perhaps the UIWebView is shorter than Mobile Safari, which could create the possibility of scrolling in the UIWebView that doesn't exist in Mobile Safari.
My suggestions are:
Make sure you have the latest version of jQTouch (https://github.com/senchalabs/jQTouch)
Make sure you are doing exactly the same testing in UIWebView as you are in Mobile Safari (i.e., if you scroll down prior to tapping in one, do the same in the other).
HTH,
j