SVG filter not working in Safari

Question

On Safari 11.0, if I copy and paste the following code into the js console, I get the result shown in the image A, where the filter hasn't been applied to all elements.

However if I do the same thing on Chrome, I get the result shown in image B, the filter has been applied to all elements as expected.

Im simply adding an SVG filter that I want to apply to the whole HTML doc.

Any suggestions on why this is working on Chrome and not Safari?

var matrixValue = '0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0      0.299 0.587 0.114 0 0      0 0 0 1 0'; 

var div = document.createElement('div');  
div.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><defs><filter id='ulSvgFilterDoc2'><feColorMatrix type='matrix' values='" + matrixValue + "'></feColorMatrix></filter></defs></svg>"; 

div.setAttribute('class', 'ulSvgFilterDoc'); 
div.setAttribute('id', 'ulSvgFilterDoc'); 
div.setAttribute('style', 'display: none;'); 
document.getElementsByTagName('body')[0].append(div); 
document.getElementsByTagName('html')[0].setAttribute('style', 'filter: url("#ulSvgFilterDoc2")'); 

Image A: Safari

Image B: Chrome