Removing extra elements to fix styling in IE

Author: ruhley

lib/scripts/template.js

@@ -2,13 +2,9 @@ angular.module('color.picker').run(['$templateCache', function($templateCache) {
     $templateCache.put('template/color-picker/directive.html',
         '<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n' +
         '   <div ng-class="{\'input-group\': config.swatchBootstrap}">\n' +
-        '       <span ng-if="config.swatchPos === \'left\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}">\n' +
-        '           <span class="color-picker-swatch-color" ng-attr-style="background-color: {{swatchColor}};"></span>\n' +
-        '       </span>\n' +
+        '       <span ng-if="config.swatchPos === \'left\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n' +
         '       <input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n' +
-        '       <span ng-if="config.swatchPos === \'right\'" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}">\n' +
-        '           <span class="color-picker-swatch-color" ng-attr-style="background-color: {{swatchColor}};"></span>\n' +
-        '       </span>\n' +
+        '       <span ng-if="config.swatchPos === \'right\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n' +
         '   </div>\n' +
         '   <div class="color-picker-panel" ng-show="visible" ng-class="{\n' +
         '       \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n' +

lib/styles/angularjs-color-picker.less

@@ -40,18 +40,8 @@
 
         &.input-group-addon {
             display: table-cell;
-            position: relative;
             width: 28px;
         }
-
-        .color-picker-swatch-color {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-radius: inherit;
-        }
     }
 
     .color-picker-panel {