I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
this is a new behavior that started lately (last 2 months) in IOS mobile devices only. in android devices the pause/play button overlay still exists.
The behavior:
when embedding inline youtube video with controls=0, when the video plays, the only way to stop it is by clicking the middle of the video on the pause button overlay (except using an external button and the api off course). in desktop and android this works great but in IOS the pause button overlay in the middle of the video does not exists any more. this means that in order to give the user the ability to stop the video we must put controls=1 which is less convenient.
is this intended or a bug?
also, the property fs=0 (is to allow full screen) does not work on IOS.
Thanks
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode
the issue we are facing is that the mouse cursor disappears when a user is using the app in a safari on MAC. The app UI is in flex 4actionscript running in the flash player.
So whenever the cursor hovers over an HDividedBox draggable divider the cursor changes and on returning to the advanced data grid it disappears.
We thought of replacing that with a custom cursor written in javascript, which would have been worked, but we also have an iframe embedded in the flash movie.
The custom javascript cursor listens for mousemove in the parent div holding the swf and updates its position however the JS script is not usable as the user hovers over an iframe and it does not bubble up the mouse move event.
Looking for an alternate solution now.
I've created a rather simple Flex application using Flex Builder 4, which connects to a webcam on the user's PC. To do so, Flash is presenting the user with the infamous privacy warning.
Now, the problem is that user can't click on the panel, as it seems unresponsive to any user interaction.
Some more details:
Firefox 3.6.12 on Mac/OSX, Snow Leopard.
Adobe Flash Plugin 10.1.85.3 / 10.1 r85
The Flex app is working fine in its own window/tab but the problem shows up as soon as the html page with the Flex app is embedded into the iframe of another page.
If I artificially put an Alert box before connecting the camera, the user is able to interact with the Flex application but as soon as the Privacy panel is shown, the Flex app stops interacting.
The app works fine under Chrome and Safari but I have not tried this under Windows.
I've read that there are problems with CSS positioning so I removed any CSS style impacting the Flex app.
Before I change my strategy and get rid of the iframe (which will cost me quite some effort) I'd be happy to know whether others have experienced the same problem and if there are workarounds.
Thanks.
I had the same issue for weeks now. I found what may be the problem. It has something to do with the css alignment. try to remove the text-align:center; from the div flash is in and it will work again. Somehow the active areas from the security panel don´t shift with the display image…
In my application, this problem is apparently caused by an element containing the flash having the css margin: 0 auto. This leads to the left edge of the flash object sometimes being reported as a decimal, e.g. $('.flash').position().left --> 450.5px. Whenever it's not a whole number, the security panel failed to react to clicks.
The fix described in https://bugs.adobe.com/jira/browse/FP-4183 and linked to by Christiano almost works. However, it failed whenever the browser was resized to be so small that the left margin disappeared.
Here's what fixed the issue for me:
function registerMozillaFlashFix() {
if ($.browser.mozilla) {
$(window).resize(function() {
$(".flash").each(function(ii, e) {
var $e = $(e);
$e.css('margin-left', $e.position().left % 1 === 0 ? '0' : '0.5px');
});
});
}
}
Then just call window.resize() once your flash has been set up.