I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items present on the right and the bottom part of this div do not appear after scaling. If I resize the window (or change the orientation on iPad), the div scales correctly and the items begin to appear, but again disappear after a certain size.
This used to work fine with IOS 5.0 and previous chrome/safari versions. Is this a bug in latest webkit version? Also, is there any workaround to avoid this behavior?
I had got a solution for this long back but forgot to update this post. This happens because of layer compositioning done by chrome. Please add translate3d(0px, 0px, 0px); in the transform string. Adding this will create a new layer for the item and issue will be fixed. :)
Read more about layer compositioning here : http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
I have a site (ils-main.attorneysonlinepreview.com) that scales properly for everything except the menu bar. It's a fixed width site and I've set the viewport meta tag appropriately. For some reason, the menu items are scaling up instead of down so they wrap instead of fitting as they should.
Anyone seen anything like this before?
The issue is only on the iPad, not on 'real' computers. The scaling issue is there on Chrome on the iPad as well. The menu should have 5 items, but the last two wrap and because it's white lettering on white back ground, you might not have noticed it.
I just discovered Fabric.js and though the documentation is a lacking a bit, it seems like it will handle everything I need for an HTML-based Dream Board tool I'm building. It appears that it doesn't play well with JQueryUI, though.
When I set any of my objects to be JQueryUI widgets, button, dialog box, etc...the control handles seem to be non responsive on the top half of my canvas items, and even on the bottom, the hit areas for resizing/rotating are greatly reduced, which makes the items hard to manipulate. Has anyone run into this? Is this a known issue? I checked github and have tried to search SO to no avail.
Thank you!
http://seismicdevelopment.com/test/no-jquery-uis.html - No JQuery UI Widgets...behaves how I'd expect.
http://seismicdevelopment.com/test/with-jquery-uis.html - Click 'Add Image', you'll get an image, but compared to the other page, you'll notice that the corners of the image aren't as interactive...you can move the image ok, but rotating and scaling is ver hit-or-miss.
The problem must be in offsets. jQueryUI is probably modifying height of those buttons, which moves canvas slightly down, comparing to how it was during initialization.
I explained this — and why it happens in Fabric — in more detail here.
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.