I'm writing an app which uses html5 video elements.
On iOS Safari when using playsinline to ensure the video is treated as an inline element for positioning etc, it works as expected except that the video appears on top of everything. z-index and positioning techniques don't seem to help with this issue. I cannot get anything to appear on top of the video under any circumstances.
On every browser except iOS Safari this seems to work absolutely fine.
For reference, this is an Angular app, and I'm currently testing in Mobile Safari on iOS 11.1.2
Also worth mentioning, the video src will resolve to a local blob url. eg. blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6
<video
id="video"
[src]="src"
autoplay="autoplay"
muted="muted"
webkit-playsinline
playsinline>
</video>
I had the same problem. Removing overflow style from parent div of video tag solved it. See Video and z-index inside scaled element: some divs disappear for more information.
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
I'm developing an ionic app in iOS, I placed the pdf inside an iframe just by simply doing the following:
<iframe src="https://docs.google.com/gview?embedded=true&url=http://example.com/resources/myfile.pdf" mozallowfullscreen marginwidth="2" marginheight="2" width="90%" scrolling="auto"></iframe>
I didn't used cordovaInAppBrowser because I ran a lot of problem like after clicking the button the InAppBrowser doesn't open unless I don't minimize the app. So I just used iframe as the workaround. But the problem now is that, after the pdf being loaded, and the user clicks on the full screen of pdf, there's no back button. Is there a way I can remove the full screen button from the pdf or add a back button on full screen mode of pdf? I tried removing the mozallowfullscreen but doesn't work since it's for the iframe not for the pdf.
P.S.
I tried accessing the div inside the iframe that holds the button for full screen, but no good, it doesn't get the div, it's probably because I'm violating the Same Origin Policy.
Here's the code on how I tried to access the div:
$('#myframe').each(function(){
console.log($("div[role='toolbar']"));
});
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well,
but it causes touch events stopping work out of the scrolling area.
Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: I have fixed this problem but I still no wonder the real reason.
In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
Hope this helps!
This is caused by having an <iframe> on the page. Many scripts create <iframes> to do their work including social tracking buttons (Facebook, Twitter, G+), analytics tracking (Google, etc.), and libraries like PhoneGap.
It doesn't matter how the <iframe> is displayed. display: none; visibility: hidden; width: 0; height: 0 does not fix it. If an <iframe> is on the page it will happen, sometimes intermittently and sometimes always.
The only solution I've found so far (which is turning out to not be very workable in a production app) is to delete all <iframes> on the page, create them only when needed (for example, when I need to call a PhoneGap API), and then delete them when finished.
I confirm I saw the same issue on a web app using extensively touch events and list scrolls.
Before iOS5 I was using iScroll, and everything was working fine;
With iOS5, I used -webkit-overflow-scrolling:touch to scroll lists to get faster scrolls.
The consequence is I met random occurrences of touch events no more working on various parts of the app. The issues generally occur after I scrolled a list. it affects randomly elements outside the scrolled area, typically a footer menu.
Reloading the app when in 'frozen touch' state doesn't unfreezes it : to unfreeze it, I had to close the safari tab, open a new one and reload, until I met again the issue while using the app.
The issue is seen on iPad2, iPhone 4, iPhone 3GS, all on iOS 5.0
Eventually, I deactivated the overflow touch scroll and came back to iScroll, and things work well as in iOS4 .
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch stops responding.
My phonegap app will work fine until I make a call to a Phonegap API, at which point the touch will stop responding on mainly the first element that has a event attached to it in the current view. A view for my app is body > div.current with the rest of the divs display none.
I can replicate this every time.
It is clearly a bug in iOS5.
Here's a variation on a few of the answers already listed.
My specific issue was that reorientation caused scrolling to stop working completely when -webkit-overflow-scrolling: touch was applied to an element.
Example: Landscape orientation is shorter and needs a scrollbar. Portrait is tall enough that no scrollbar is needed. Reorient to landscape; scrollbar is present but non-functional.
listen for the orientationchange event
do something which triggers a layout change on the scrolling element
ensure that the change is significant enough that the rendering engine doesn't optimize it away. For example, hiding then immediately showing does not seem to do anything. Anything that uses setTimeout() seems to work (perhaps it is the different execution context, I don't know).
Fading in and out works, or hiding and then showing with a short delay works (though it flashes). #Sari's solution for changing the scroll properties works and does not cause any visible redraw.
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
Note that I haven't tested this fix beyond my iPad 3 other than to ensure that it doesn't cause script errors in Chrome or IE 7/8/9.
In case this is of any use...Incorporating PhoneGap I was using Zepto to append ajax-loaded, scrollable content into the dom. I was then applying a css transition on it. There were no iFrames on the page.
I was experiencing the same issue as mentioned here, where scrolling would just stop working. When I copied the generated code into a separate file and tried that on the iOS simulator - everything worked as expected.
I eventually got it to work by querying the height of the parent container - just before the css transition. By adding var whatever = $('#container').height(); the scrolling worked.
To improve a little bit ThinkingStiff's excelent answer, you can avoid blinking
- if overflow:hidden is set
- if instead of 'auto' value just remove property:
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);