I have a video player with rounded corners which works great on all browsers except Safari when entering PiP.
In Safari when you enter Picture-in-Picture mode, it shows this placeholder with text "This video is playing in picture in picture". Which is mostly fine.
But the placeholder doesn't respect the css on the video element which is supposed to have a border-radius: 16px
I checked in the browser, and there's nothing else overriding it. I also tried adding !important and overflow: hidden to see if that did anything, but no luck.
I found this article on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture describing a :picture-in-picture pseudo selector.
I tried that but it seems extremely limited to what you can style. So far only height/width and opacity has worked. Adding border-radius does not seem to affect it at all.
Is this just a limitation in Safari? Is there no "clean" way to keep the border radius and video styles on the placeholder when entering PiP mode?
Related
I have never had this happen before. I have an image in the background of this input field. I have it aligned using the X and Y positioning and I aligned it in Firefox. When I look at it in chrome, it is too close to the words "log in" and is about 2 px too low.
I found this link on SO, but I guess I am not really following it.
How to write specific CSS for mozilla, chrome and IE
I was trying to use :before but could not get it to work. -webkit and -moz do not seem to be a good solution and I could not get thsi to work anyways.
the link is http://www.splitlightdesigns.com/oxbridge
UN - oxbridge PW oxy510
Many thanks,
Houston
every browser has its user style sheet that it applies on its own to some elements unless you override it with custom styling.
you should first of all, reset all of your styles using a 'reset' sheet, here is the first google result: http://meyerweb.com/eric/tools/css/reset/
just reset everythign and then start styling
There is 2px margin on submit input, but not in all browsers. It could be the problem, so set margin: 0 to submit button (or set margin: 2px for all browsers).
I'm having some issues on my Shopify site getting the input selector dropdown to display properly in Firefox. The field shows and is clickable but doesn't fill with text. Works fine in Safari, Chrome, and IE.
Any idea what might be causing this?
http://stillmotionstore.com/products/storytelling-workshop-basic
Yes!
It fills with text, but the text isn't visible.
Your CSS says the following:
height: 24px;
padding: 1.384615385em 0.615384615em;
That's why there's no place for the text anymore .
Solutions
Increase the height
Remove the top/bottom padding
Use box-sizing: border-box so that the padding is added to the height
Try to debug such problems with the Web Developer Tools in the future (available in all browsers), and you'll find this bugs immediately!
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
I have the two images below.
They are the same image, with one having a slight glow effect on the text.
They are setup as below:
<div id="header"><a></a></div>
withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;
i am the using the below jquery code
$('#header a').hover(
function() {$(this).animate({"opacity":"1"}, 1000);},
function() {$(this).animate({"opacity":"0"}, 1000);});
to fade the anchor image in and out on hover.
this works fine in firefox, chrome ect.
But in internet explorer the image is given a solid black background where there is transparency.
How can i fix this?
NB: I am only worried about ie7/8 not 6.
http://webspirited.com/header-reachsniper.png
http://webspirited.com/header-reachsniper-hover.png
Update
I have decided that this is simply not worth my time to do in internet explorer.
However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.
In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.
EDIT: You also need to add the alpha filter in the CSS, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);
Otherwise, jQUery will clear the existing filter as it adds the alpha filter.
This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/
It notes all of the methods which he tried, and the final solution he arrived at the end:
What did work was a little library
called DD_belatedPNG that applies PNG
transparency via VML instead of
AlphaImageLoader. It’s designed for
IE6, but it works just fine in IE7 as
well. For IE8, I was forced to throw
out an X-UA-Compatible meta tag and
step IE8 down to IE7 mode for this
particular page.
With a tiny caveat at the end
It’s still not perfect. I noticed a
faint white bounding box poking
through at lower opacities that forced
me to slightly adjust hover effects
for all versions of IE. But you know,
for all that, it’s darn well good
enough.
On our website http://www.dimagi.com, the items in the jQuery menu near the top of the screen gain a background-color on hover. The hover background-color of the rightmost list item ("About Us") is cut off at the very right edge of the text, seemingly only in WebKit (tested Safari and Chrome in Windows XP).
Can anybody see what I might be doing wrong in the CSS? Or is this some obscure WebKit bug?
The background is getting clipped because you have a block element inside an inline element and the box model works quite differently for the two. If you set the display property of #dropmenu > li to inline-block instead of inline it will work, but I don't know how IE handles that. The other option is to set it to display: block and float the lis. Either way, you'll have to do a little reworking for the menu CSS.
I figured it out by playing around with Chrome's Developer Tools until I got it to look right-ish. If you're not familiar with it, it's a very similar tool to FireBug in Firefox. Invaluable for debugging your CSS.