Alien support for IE

We got lucky - the fact that our alien styling choice required phantom overlays had the nice side-effect of preventing the ability to focus the aliens. Therefore, as soon as we started ignoring IE to deliver nice alien handling for standards-compliant browsers, we inadvertently solved(?) the IE alien problem. I've touched up the styling to look nice in IE 9 (solid green phantoms) and IE 10 (stripes). Shield GIF switched to PNG because IE 10 renders the transparent GIF as solid red. Yeah, red.

Change-Id: I3bc69acba9ed883a823cdf722117b90966bc332b
This commit is contained in:
Christian Williams 2012-12-07 15:51:15 -08:00
parent 41f7b97ca4
commit 61de058d08
2 changed files with 8 additions and 4 deletions

View file

@ -43,8 +43,11 @@
}
.ve-ce-phantom {
background-color: #C3E59A;
background-image: -ms-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-image: -webkit-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-image: -moz-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px);
background-image: repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
background-size: 14px 14px;
position: absolute;
}

View file

@ -66,13 +66,14 @@ ve.ce.Node.static.domAttributeWhitelist = [
/**
* Template for shield elements.
*
* Uses data URI to inject a 1x1 transparent GIF image into the DOM.
* Uses data URI to inject a 1x1 transparent PNG image into the DOM.
*
* @static
* @member
*/
// Using transparent png instead of gif because IE 10 renders gif as solid red when used as img src.
ve.ce.Node.static.$shieldTemplate = $(
'<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ' +
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAFElEQVR4XgXAAQ0AAABAMP1L30IDCPwC/o5WcS4AAAAASUVORK5CYII=" ' +
'class="ve-ce-node-shield">'
);
@ -236,7 +237,7 @@ ve.ce.Node.prototype.getModel = function () {
ve.ce.Node.getSplitableNode = function ( node ) {
var splitableNode = null;
ve.Node.traverseUpstream( node, function ( node ) {
if ( node.canBeSplit() ) {
splitableNode = node;
@ -245,7 +246,7 @@ ve.ce.Node.getSplitableNode = function ( node ) {
return false;
}
} );
return splitableNode;
};