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.
Related
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}
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.
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
I'm new here (and also with bootstrap and JavaScript) and hopefully im not asking a question already asked before. I did google plenty and search on here and could not find anyone mentioning this specific problem.
I found a bug I think with Bootstrap 2.2.1 .. when you close a modal, the href link which called it now has a blue border around it. This happens with buttons, nav items, anything. This can be seen on the Bootstrap live demo itself - click the blue button "Launch demo modal" under the section "Modals bootstrap-modal.js". You can see a light blue border around the button after closing the modal.
http://twitter.github.com/bootstrap/javascript.html#modals
This issue drove me mad, I messed with the CSS for ages, then tried different browsers, until I downgraded and the issue above is not present on bootstrap 2.0.4.
Does anyone know if this is a known issue with 2.2.1 or has it been present since a particular version?, or what the problem is here?
It's pretty simple fix once you locate what the CSS property is. I think it came from some issue with the modal's focus and they decided to modify the generated html. You need to define the following CSS. It comes from the following link.
.modal-open .modal,.btn:focus{
outline:none!important
}
Hope it helps! I made a jsfiddle of the result (including bootstrap's css + js) so you watch a live demo of it, here. Note that if you're using something that isn't a button the outline may come back, since we're only applying it there. Since you're referring to a href, it's likely that you're calling the modal from a link, and therefore should also trigger a:focus