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.
Related
To begin with, I just started my first job as a junior front-end developer and got a task to fix bugs in the safari browser. (Chrome works well).
Our web app is developed using TypeScript, React (with Material UI framework) and Webpack.
Unfortunately, I spent hours surfing the internet and trying to find a solution for these bugs, but I couldn’t. I feel these bugs come from Material UI, but I might be wrong. I hope someone can help me with that and thank you in advance!
So the main problems I encountered in Safari were kind of CSS bugs.
Take a look:
Chrome_View / Chrome_View_Wrapped
Safari_View / Safari_View_Wrapped (Bugs are marked)
As you can see the in Chrome everything looks okay, while in Safari some of the things get corrupted.
ToolBar items get wrapped even there is free space. You can take a look at html and CSS. For example, if I comment (margin: -16px;) last item gets to its place.
Blue drawer background is not displayed until you wrap it out. You can take a look at html and CSS. For example, if I comment (overflow-x: hidden;) it gets fixed.
Wrap button on click should transform its direction by 180 degrees.
Footer and Drawer do not display images.
If anyone is familiar with this kind of issues please share your experience.
P.s. It would be great to avoid putting everywhere prefixes manually.
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.
I have searched stack overflow, googled, and gone to apple's documentation regarding a problem that I've encountered in my Cordova Html5 iOS 11+ app. The app plays videos. It works fine except there is a gray overcast button on top of the video that should display the iOS icons. The button is simply a gray "blob". This happens when the video is first loaded and then again when it is ended.
It looks like this (Upper left screen corner:
I've tried using many css workarounds that I found on stack overflow and also on some of my other searches. I thought that this is/was a css problem, but I'm just at a loss. I can't find anything in the Safari docs. The closest I came was a post regarding a gray background issue when playing video. That was solved using brightness. It didn't work at all for my issue. I also couldn't hide the gray buttons.
The video is standard html5:
<video src="myVideo.mp4" controls poster="myPoster.png" height="auto" width="100%">
</video>
Thank you ahead of time for your help. If I need to add more information, I can do that. I just don't want to add things that aren't needed.
-Rachel
If you could provide a sample page where this problem occurs that would make it a lot easier.
I'm pretty sure this should be possible with css though. Maybe not the most "beautiful" way to go at this but what I would do is to find the markup of this element and look what css selectors and rules there are which effect it. Then copy the css selector in your own stylesheet and maybe add some class or id to it to make sure it overrides these rules and then simply add a display: none; to it.
Maybe give !important a try too if it doesn't work right away.
In the dev tools you can add css rules directly so you can just go through the elements and add display: none; there, to see which element you need to refer to in your file.
But again, it's really hard to tell without an example to look at.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
This is probably the worst question I have ever posted on Stack Overflow but I am trying to figure out how to fix this page so that it renders the same way in IE7 as it does in IE8.
As far as I can tell there are 3 differences.
The first is that the content becomes centered in IE7.
The second is that the middle section of the video shifts slightly to the right so that it is out of alignment with the top and bottom border images.
The third is that the thumbnail of the active video becomes slightly messed up on the right hand side as if it is too big for its background image.
I could post all the code but I think there's too much for it to be effective on SO.
Here is a link: http://facebook.icrossing.de/tools/youtubetab/esprit/
Perhaps there's someone who has seen this sort of problem before and is able to diagnose a quick and not too painful solution.
If you are not using the New features IE8 has to offer, you should consider using compatibility mode.
Here is MSDN page on how to define document compatibility.