I am trying to implement facebook's live stream plugin on my website. I see that there is a scrollbar on pc and mac browsers, but not on iphone or ipad safari. I think it is because iphone and ipad treat scrollbar differently since they are both touch based devices. So I expect to scroll iframe with two fingers, but it does not work either.
Here is sample page (used a different src url) http://para.qacode.com/test.php
How do I enable two finger scrolling or normal scrollbar on ios safari?
On iOS versions prior to 5, you can scroll iframes on iPad/iPhone using two fingers, but this is a bit of a hidden feature and most people don't know about it. I'm not sure why tow-finger scrolling isn't working for your iframe - perhaps there is some JavaScript intercepting the touch event?
On iOS 5 this has been fixed and scrolling works as expected for iframes with one finger.
If you need to scroll a sub-region of the page on iOS 4 and earlier, the best bet is to use a library such as iScroll that implements scrolling with JavaScript touch-event handling.
Apply these styles to the parent container:
-webkit-overflow-scrolling:touch;
overflow:auto;
Related
With Safari on iOS, videos that are embedded below the fold inside of a scrollable iFrame will not begin playing when tapped. If you tap on the video multiple times, or do a long tap, the video may or may not begin playing. On the contrary, the video will play without issue as long as the video is embedded above the fold.
Here is an example showing a video not working when embedded below
the fold inside of an iframe:
https://d1wlensemu2d8.cloudfront.net/safari-bug/example.html
Here is an example showing a video working when embedded above the
fold inside of an iframe:
https://d1wlensemu2d8.cloudfront.net/safari-bug/example2.html
Here are the contents of the iframe from the first example. The video
plays fine when the content is accessed directly:
https://d1wlensemu2d8.cloudfront.net/safari-bug/iframe.html
Until the bug is resolved, one possible work-around may be to extend the height of the iFrame and make its container scrollable. However, this is less than ideal when the content is variably sized and/or contains links to other similarly hosted pages. Can anyone recommend a better solution?
This was tested on iOS 15.4 with an iPhone 12 and iPad Pro (9.7-inch).
Here is a reasonable work-around for the time being:
window.addEventListener('touchstart', function(e) {
e.preventDefault();
});
I am currently developing a hybrid app in iOS that loads a website and has some other features (contacts, sharing, notifications...) using cordova plugins. I do have access to the content of the site that is being displayed by the iframe.
The normal way this is done is to load the website in an iframe. I have already done this in android and it works very well. In iOS however:
Safari messes up the size of the frame. I fixed this by setting the min-width css style to 100% for the frame.
Scrolling on the iframe is always set to "no" even if you specify "yes. I "fixed" this (so I thought) by using the only solution I could find which is to wrap the iframe in a div and scroll the div. This made the header (position:fixed) scroll with the page when it should be fixed to the top of the page and broke other things on the page that rely on scroll position to trigger an action. I also tried modifying the body of the content to contain css styles mentioned here but this didn't work either. I was back to square one.
I have spent a total of a week researching how to fix this with no avail. Recently I have discovered that loading my website in iOS's UIWebView or WKWebView works well to display the site exactly how I would expect.
That brings me to two possible solutions (and my question):
Maybe I missed something with the css style on the content of the site. I read that it is possible to get scrolling to work this way but I am sceptical because safari does not allow scrolling on an iframe.
(The likely solution but the one I cannot figure out) Make my cordova app use a one of iOS's webviews. This is what I am having problems with. I cannot figure out how to do this. Is a webview an iframe? How do I use one of these webviews in my app? What does the index.html (cordova specific file) look like when I use a webview instead of an iframe (because currently this is where my iframe is).
I solved this. Since I have access to the contents of the page, I added:
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
To the scrolling body of the page. This fixed my problem
I am using JQueryMobile to build an application that will mainly run on a Linux-based touch device with Firefox.
My issue is that, with JQM, when page contents cannot fit on the screen, the web browser displays a vertical scrollbar displays a vertical scrollbar
There is no such issue with Sencha and Dojo. They both behave like if they were running on a touch-based device, even with desktop web browser (reduce the height of your browser window) :
Sencha scrolling list
Dojo scrolling list
So, how can I make JQM to be touch-friendly when running on a desktop web browser ?
It seems that there is no really good JS and/or CSS solution for this issue.
Hiding the scrollbars with CSS (overflow-y: hidden;) prevents scrolling and mess JQM touch events.
I found a workaround by using a Firefox plugin (Grab and Drag), which is an acceptable solution since I control the device that runs the browser.
It works fine, but it is not a pure JS/HTML/CSS solution...
How to make a one page website with parallax scrolling working both desktop and mobile devices (also iOS)?
This is my code for now... it speeds up 1 div when a scroll is triggered, but on iphone, it only moves when you let your finger off the screen and i'd like it to scroll smoother with a nice slide :)
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
$('#speedup').css('margin-top', (top/10)*-5);
});
});
Firstly, you have to use css2 media query, or using em instead of px for you css styles to ensure your browser supports both mobile/desktop web versions.
then, of course you need javascript to help you do the parallax scrolling for you web game/application
In iOS MObile Safari, after flicking to scroll, is it possible to manipulate the DOM while the system is in deceleration mode? I tested this by constantly incrementing a number in a fix-positioned element on the page using setInterval and I noticed the DOM doesn't update when scrolling. Is there any way to do this?
No. If you want to run javascript in response to scrolling, your only solution is to use programmatic scrolling (iScroller, zynga-scroller).