Merge pull request Polymer#3776 from Polymer/refresh-styles-ie

Refresh cache'd styles contents in IE 10 and 11
ktiedt · Jul 21, 2016 · 00b6c96 · 00b6c96
2 parents e5a1c7f + 80be0df
commit 00b6c96
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -20,6 +20,7 @@
     var matchesSelector = Polymer.DomApi.matchesSelector;
     var styleUtil = Polymer.StyleUtil;
     var styleTransformer = Polymer.StyleTransformer;
+    var IS_IE = navigator.userAgent.match('Trident');
 
     var settings = Polymer.Settings;
 
@@ -493,6 +494,10 @@
           }
           element._customStyle = style;
         }
+        // @media rules may be stale in IE 10 and 11
+        if (IS_IE) {
+          style.textContent = style.textContent;
+        }
         return style;
       },
 

diff --git a/test/smoke/stale-ie-cache.html b/test/smoke/stale-ie-cache.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link href="../../polymer.html" rel="import">
+
+  <style>
+
+    @media (min-width: 800px) {
+      body {
+        background: red;
+      }
+    }
+
+    @media (max-width: 799px) {
+      body {
+        background: green;
+      }
+    }
+  </style>
+
+
+</head>
+<body>
+
+  <dom-module id="x-foo">
+    <template>
+      <style>
+
+        :host {
+          display: block;
+          margin-left: var(--foo, 0px);
+        }
+
+        .item {
+          width: 100px;
+          height: 100px;
+          border: 1px solid white;
+        }
+
+        @media (min-width: 800px) {
+          :host {
+            --foo: 10px;
+          }
+
+          .item {
+            background: red;
+          }
+         }
+
+        @media (max-width: 799px) {
+          .item {
+            background: green;
+          }
+        }
+
+      </style>
+
+      <div class="item"></div>
+    </template>
+    <script>
+      HTMLImports.whenReady(function() {
+        Polymer({
+          is: 'x-foo'
+        });
+      });
+        var debouncer;
+        window.onresize = function() {
+          Polymer.Debounce(debouncer, function() {
+            Polymer.updateStyles();
+          }, 100);
+        };
+    </script>
+  </dom-module>
+
+
+  <h1>The box should match the background color</h1>
+
+  <x-foo></x-foo>
+
+</body>
+</html>