wondered if anyone can shed some light...
If you watch the video in full-screen mode on this page: http://singtonicity.com.gridhosted.co.uk/ you'll notice some elements float on top of the video (to view in fullscreen mode double-click the video whilst it's playing).
I am assuming this is to do with the classic iFrame/z-index issue but I just can't find away round this one.
I am wondering if it's anything to do with the default styling browsers give to iframes in full screen eg: iframe:-webkit-full-screen???
Any help is most welcome.
Thanks in advance
Richard
This is actually to do with the opacity and the animation you have. Try removing the fadein ease-in-out 1 CSS animation and check the result.
Take a look at this excellent article from Phillip Walton, should help clear a few things up: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I had such problem in Safari browser. Needed to remove will-change css property from parent element to fix it.
Related
If the size of the image is 200.51px there is no wiggle, but if it is 200.49px there is a wiggle due to the transformation matrix rounding. This is detailed in this article Chrome Font appears Blurry
An interesting thing though, is if I have an Embedly component on the page, the issue goes away. What is Embedly adding to the global css?
Before I try to implement something like the link demonstrates to fix my wiggle problem when doing transform: scale(1.1);, I would like to know if there is a more straightforward fix that can be added to my css, as it seems that Embedly is doing that.
Thank you for any insight in advance.
I have a problem with my website, for example: https://filmowo.co/odcinki/marvel-cloak-i-dagger-1x1/ when you open the player in fullscreen mode there are site elements under the video. Beware of ads. Here is a screen also:
screen
I was only able to fix the header which has fixed position but with the content section its not working. Can you please take a look? I think its pretty easy but Im not css specialist :)
update:
this is the element that need to be modified, any ideas? https://i.snag.gy/YHy4Ns.jpg
Okay, there was an issue with animate.css plugin which I used to animate a player while loading.
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
Hi I am in the process of developing my website. Please understand it is work in progress.
I have a menu bar which when scrolled, will stick to the top and a background will fade in and a border will slide out.
Here is a screenshot of an example of what it does.
What makes this even more strange is that when there is a video element present it does not do this. You can even try deleting the video element from this page and then it starts doing it. (Located in < header>, < div class="feature-content">, < video> )
I have never seen this before with a CSS transition. I have tried it with Firefox 17 and Chrome 27 for Mac.
Does anyone have any ideas ?
Thanks :)
Edit: I apologise for not remembering I had restriced acess to the server with a redirect, this has now been fixed. :)
Turns out it was something to do with animate.css. By removing this it started working correctly again.
In Webkit, will a 3D CSS transform set to repeat indefinitely, continue even when it or a parent element is hidden from view by styling (CSS)?
The reason I ask is that I am seeing unexpectedly high CPU usage on a page I am developing.
If anyone knows a good way to diagnose this issue (for example visualizing where CPU cycles are going on a page, as opposed to a blanket CPU usage per tab), I would be very grateful.
Anecdotal evidence (removal of the hidden CSS animation) would suggest that the animations do run in the background. Does anyone know how to prevent this?
In chrome 16.0.912.75, at least CSS animations appear to continue even when the element is set to visibility:hidden;. Setting display:none appears to resolve the issue.
you can debug this kind of situation with the developer tools
chrome / safari right click inspect element.
Go to the timeline tab and click on record, after that you can see what the browser is doing internally.