So this problem is a little tricky. Basically, I found that the menu bar won't pop up in a UIwebview the first time you long press on a word. It would show something like this:
Example img
The words are selected, but the menubar is now showing. However, the second time you longpress on another word,the menubar just pops up fine.
Example img
Also, if you tap anywhere in the UIwebview or scroll it before longpressing on a word, the menu bar also shows up. It's just when the long press action is the first action you have with the UIwebview, the menu bar won't show up.
I checked this problem with some other third-party web browsers on app store (firefox, chrome). The same problem exists. However, Safari does not have this problem. Also, my iPad 2 does not have this problem either. But my iPad air does, so do the xcode simulators.
Not sure if I'm describing this problem clearly, thanks in advance for anyone that helps.
This problem is kind of Bug in iOS 9 web view
Me and my colleague was having same discussion yesterday.
Also it is only on Web view,Messaging apps works fine
On my webshop's home I have 2 problems on iPad :
1) The menu works but the forms in it (connexion and contact) can't be filled
2) The divs with onclick event on them in a cycle (big pictures who scrolls) aren't clickables...
EDIT :
- The problem occurs only on iOS 7, no problem on iOS 6.
- Some sort of "zone" appears on the places unclickable when we maintain to copy. A very strange zone, like a div who don't exists and don't appears on iOS6 or desktop.
See the picture :
Here's the problem
Problem solved !
The problem was due to an iframe for a pop up... It's without any problem on iOS6 and lower, on desktop too...
But I have changed the popup by colorbox to avoid this problem on iOS7.
I'm building a stand-alone application.
The problem is that when I deploy on my webserver, then test it on a desktop browser, everything's fine, not on my mobile device (IPad): the colors are different (yeah, I'm stuck because of colors -.-).
I tried with different browsers - same results.
I use the mobile.ios.css file for my app. So, per example, with the ios stylesheet you got the default blue gradient navbar with the white text for the title (ok on desktop browser). On my Ipad it renders a gray/white gradient instead of the blue and the title is a deeper gray with some shadow. It seems to be the default style of the navbar, but why is it working on a desktop then?
I used the theme builder offered on the kendo ui website to fix it up, but it failed.
I think this issue belongs to the javascript behind kendo framework.
Anybody got an idea or went through some similar difficulties?
Kendo UI Mobile shows slightly different styling on iPhone and iPad, to better blend in as a native-like application. There are also differences between iOS versions (e.g. the Switch is different between 4 and 5 and the TabStrip between 5 and 6).
If you prefer the same styling everywhere, you can force the platform in your application - check the docs for how to do it.
I have a client that wants the desktop version of foundation 4's top bar to appear on the ipad instead of the mobile version. This is fine as their site only has a few sections, but each section has sub-pages and so the nav displays dropdowns for each link.
I modified the break point and the nav looks fine on the iPad, and tapping a parent link displays the submenu - but I can't get the dropdowns to close once one is open - you can switch between dropdowns, but tapping anywhere else on the screen makes the dropdown flash off and then it reappears.
I've tried adding some JS to catch clicks anywhere else on the document body, and to hide any visible sub menus, but it's not working, I still get the off/on flash - I can't see anywhere in the foundation.topbar.js that would be overriding it, but I also can't think of anywhere else in the code that would cause this.
Does anyone have any experience of getting these desktop-version menus to work nicely on an ipad? And before you say 'the ipad is a mobile device, you should use the mobile nav that works' - I already tried convincing the client of that and they didn't go for it :/
Easiest solution:
if (Modernizr.touch) {
$('.top-bar-section ul li .parent-link.js-generated').show();
}
foundation already prepares the top level nav item to be shown in the dropdown of the mobile menu. You can use this also on desktop version of the menu on touch screens like iPad.
Andrea
I got a video element on a page that's working fine both in safari mobile and desktop.
I have a seme-transparent pull-down menu that's working fine. The problem is, when the menu is over the video element, on the desktop safari i can see the video under the menu (as desired), while on the mobile version the video element stay on the foreground (ugly) no matter what i tell the css. Is there any workaround?
The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
Yep, it's as bad as haslayout on IE!
Unfortunately not.
Based on my experience and understanding of how iOS currently works, this isn't possible.
Mobile Safari on the iPad cuts a hole for a Quicktime window , which plays back the video using the built in hardware acceleration to improve battery life. (The iPhone and iPod Touch just open it up in a separate window to achieve the same effect.)
This window doesn't play nicely with the other HTML on the page. In fact, I haven't found a way to get mobile Safari to display anything on top of a tag. My guess is that this is because the hardware acceleration only allows for video scaling and positioning, and that it's only able to handle one video at a time.
I'm using flowplayer and a simple CSS dropdown menu and had the same problem.
I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.
I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.
Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.
menu and video HTML
<div id='nav'>
<ul>
... <!-- bunch of ul/li stuff here for the menu and submenus -->
</ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>
CSS
video {
-webkit-transform-style: preserve-3d;
}
Javascript
$(document).ready(function(){
$("#nav li").hover(
function() {
$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
$("video").css({visibility:"hidden"});
},
function(){
$(this).find('ul:first').css({visibility: "hidden"});
$("video").css({visibility:"visible"});
}
);
);
I have managed to place a menu div over a html5 video tag in mobile-safari on the ipad. To be honest I didn't have any problems and it just worked. It could be though because I was using CSS3 animations and therefore the GPU? You could try using a hack to add an element to the GPU. If you put -webkit-transform: translateZ(0); on the element it should force it to use the GPU...
When you have an element you want to be in front of your <video> in Safari, you need to set into that element the transform: translateZ(1px) or more pixels, as Safari is setting to your <video> element a 0 value for Z axis (transform: translateZ(0)).
This is the only thing it worked to me. No z-index, no transform-style:preserve-3d.
I ran into this also. The only thing that I could get to work for me was to add
display:none
to the video tag when showing a div over it that needed to be clicked on.
-webkit-transform-style:preserve-3d and -webkit-transform:translateZ(0) didn't work for me.
Using Flowplayer with the ipad plugin and the controlbar plugin allowed me to remove the ipad created control bar and replace it with something that can be z-indexed below my modal windows.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
This worked for me with a dynamically created video element. I also set the z-index of the over-laying div to z-index: 888; which may also have helped.
I had this problem which was occurring on mobile devices with an off canvas menu. When the menu was over the video you could not tap any of the menu items.
I fixed it my moving the video somewhere else when the menu was on by positioning it absolutely at -100000px when the menu was not displayed it set it back being positioned relatively.
I found using display none did not work as when you set it to block again the video would not work.
I also tried setting the height to 0 - this did not work as the video still seemed to take up the space even though you couldn't see it.
The final method seems a bit extreme but it is not really noticeable when it is being used.
This is the code that will work on both the iPad and iPhone. I tried removing the controls and then add them again, but this worked only on iPad not on iPhone. After remove the opacity and then add it again it worked on iPhone also.
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
Just ran into this issue today & had to cobble together a solution from multiple answers since none fully handled the problem ...
I have video elements in a collapsed "table view" style list that were capturing touch events on iPhone when trying to tap on other list items. On iPhone the videos would play when tapping other collapsed elements that happened to be occupying the same spot on screen.
Fixing this required all of the following:
1) Using this:
video{
-webkit-transform-style: preserve-3d;
}
... didn't seem to have any effect, but I left it in anyway. Everything's working now so I don't want to screw with it further :)
2) Toggling visibility: hidden alone didn't work, and display:none didn't work as expected.
3) In addition to "visibility" the HTML5 video tag controls attribute also has to be added/removed dynamically. Either:
$("video").css({visibility:"hidden"}).removeAttr("controls"); or $("video").css({visibility:"visible"}).attr("controls", "controls");
4) Must set visibility/controls on document load based on initial browser/screen size
5) Although the main concern was the screwy iPhone behavior, I also had to account for responsive window size changes above my smallest media query breakpoint of 600px - otherwise the videos would appear/disappear at the wrong screen sizes.
$(window).resize(function(){
if ($(window).width() > 600){
$("video").css({visibility:"visible"}).attr("controls", "controls");
}
});
Quite a pain to work around what's essentially a stupid mobile Safari bug... I sure hope it works on iPad when I test it later...
For anyone running into issues with this still, another fix that ended up working for me was to change the options in the embed code to not allow controls, suggested videos, and video title and player options. I added a simple Modernizr.MQ query to change the src for tablet and mobile, and included the following to the iframe src for mobile:
?rel=0&controls=0&showinfo=0
I never completely tracked down why this works, but my guess is that the controls have some user-agent style that gives them a high z-index and makes the element sit on top of everything.