Develop Reference

Make grayscale on layer NOT <img/> in IE11

How to make equivalent of
.anyClass
{
filter:grayscale(100%);
}
in IE11 for elements other than <img/>?
The code doesn't have to work in IE10 and earlier and other browsers.
I googled some solutions like:
.anyClass
{
filter:gray; /* IE9 */
filter:grayscale(100%);
-ms-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}
but it doesn't work on IE10 and IE11.
I also found solutions for <img/> but I want to use it on standard HTML elements like <div/>, <section/> (with elements internal it).
No found solution works.
BTW. The code may not work in other browsers. I know how to filter IE11. JS (without jQuery), CSS, SVG and HTML allowed.

Style="display:block;" works in Chrome but not Safari

I have a banner on my website that by default is not shown. The code I am using to get it to show is
document.getElementById("cookie1").style = "display:block;"
This works in Chrome but is not working in safari. I am not getting any errors in Safari either, It just doesn't show the banner.
Any ideas on what could be causing this? Or a better way to hide/show a page element?
Thanks!

From testing this in Chrome and Safari, it seems Chrome is more forgiving in that it parses the style string and puts the right style in place for you, but Safari does not.
Try:
document.getElementById("cookie1").style.display = 'block';
It's probably best to be explicit like that anyway, instead of relying on string parsing for the style itself.

SVG in object tag not working as expected in Safari 5

I am trying to put SVG inside an object tag.
It works for all browsers (Including IE) except for Safari 5.
Safari 5 adds scroll bars which cuts the image.
I saw the other posts regarding this issue and I tried the following:
Using load event: I tried it, but load is not firing for object tag. If it fires I could use javascript to change the contentDocument properties
Using CSS rules for SVG tag: Since the SVG is inside the object tag it is not applying.
Use Other libraries like JQuery SVG: Well, I tried and it works, but if there is any solution with Object tag that would be nice.
Here is how it looks in IE
And Here is how it looks for Safari 5 (see the scroll bars)

Trouble hiding/showing inline SVG in mobile Safari

I'm trying to use inline SVG for our icons. Specifically I am:
Combining all svg's into an svg sprite with grunt
Referencing them inline with the <use> tag ala this article
For the most part things are working well. However, I've run into problems on iOS browsers when I try to hide/show them with JS - http://codepen.io/meanspa/pen/vEGERZ
$('.expand-link').click(function(){
$('.expand-link').toggleClass('clicked');
});
Because for this codepen the SVG definitions are in the DOM it works fine as-is, but if you move them to an external file and try to use it in mobile Safari, the SVG that's hidden originally (.icon-contract) won't display when you click on it. In fact, the only way I've found to make this work is to set .icon-contract to display:block initially, and then set a delay in JS so that it hides it after a few hundred milliseconds.
So just to summarize, it looks like in mobile Safari:
If you're using the <use> tag to reference svg's in an external file
And if some of those are display:none when the page loads
Then they can't be displayed with JS after the fact
Has anybody else run into this problem?
Thanks.
Update: As Salmonface pointed out, only noticing this on iOS 7 and older, looks like it's fixed in newer versions.

Chris Coyier posted this workaround:
Use "width:0px; height:0px;" instead of "display:none".
Working great for me so far.

Dynamically inserting html5 video element doesn't work in Opera

I'm using JavaScript to insert video elements into the DOM but it doesn't work in Opera (v10.63). The element gets inserted but the video doesn't appear/play. Works in Firefox, Chrome and Safari. I'm still running some tests to see if I can get it to work but I just wondered whether anyone else had come across this issue.
On another note which might be helpful to others, it seems event delegation is only possible with Firefox and not Opera, Chrome or Safari. That's based on code tests I've done so it could be wrong but I can't get it to work.
Many thanks

You could try using the HTML5 Inner Shiv. I know it's more aimed at IE, but it might be worth a shot.

It's possible to add the video element to the DOM using JavaScript in Opera 10.63. The code below, for example, should work (I tested it in Opera 10.61 and Opera 11).
var vid, makevid;
makevid = function(e){
vid = document.createElement('video');
vid.src = 'path/to/an/oggtheorafile.ogv';
vid.setAttribute('autoplay',true);
document.getElementsByTagName('body')[0].appendChild(vid);
}
window.addEventListener('load',makevid,false);
You do have to be sure that you're using a compatible video format, though. Opera 10.63 supports Ogg/Theora and WebM. If you're using MPEG4/H.264, the video will not play in Opera.
(EDITED to correct video format support in Opera 10.6x. It does indeed support WebM)
EDIT 2: Note that if you use JavaScript to insert a video element in the DOM, you will also need to enable the controls by using vid.setAttribute('controls',true); or by creating custom controls.