diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index 94c9b453..10bcaa25 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -13,54 +13,45 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
     var sizeTemplate =
             '<input id="view-size" type="range" min="0" max="0" value="0">';
     var sortedSizes = settings.sizes.sort(function (a, b) { return a - b; });
-    var dynamicStyleTag = null;
 
 
-    function applyCss(rules) {
-
-        if (dynamicStyleTag) {
-            document.head.removeChild(dynamicStyleTag);
-        }
-        dynamicStyleTag = document.createElement('style');
-        dynamicStyleTag.appendChild(document.createTextNode('')); // fix webkit
-        document.head.appendChild(dynamicStyleTag);
-        _.each(rules, function (rule, i) {
-
-            dynamicStyleTag.sheet.insertRule(rule, i);
-        });
-    }
-
     function cropSize(size, min, max) {
 
         return Math.min(max, Math.max(min, size));
     }
 
-    function applyCssSizes(size) {
+    function createStyles(size) {
 
         var dsize = cropSize(size, 20, 80);
         var gsize = cropSize(size, 40, 150);
         var isize = cropSize(size, 80, 2000);
         var ilsize = Math.round(isize * 4 / 3);
         var rules = [
-                '#view.view-details .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
-                '#view.view-details .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
-                '#view.view-details .label { margin: 0 246px 0 ' + (dsize + 32) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .label { margin: 0 246px 0 ' + (dsize + 32) + 'px !important; }',
 
-                '#view.view-grid .item .label { line-height: ' + gsize + 'px !important; }',
-                '#view.view-grid .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
-                '#view.view-grid .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+                '#view.view-grid.view-size-' + size + ' .item .label { line-height: ' + gsize + 'px !important; }',
+                '#view.view-grid.view-size-' + size + ' .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+                '#view.view-grid.view-size-' + size + ' .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
 
-                '#view.view-icons .item { width: ' + ilsize + 'px !important; }',
-                '#view.view-icons .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
-                '#view.view-icons .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
-                '#view.view-icons .landscape .thumb { width: ' + ilsize + 'px !important; }'
+                '#view.view-icons.view-size-' + size + ' .item { width: ' + ilsize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape .thumb { width: ' + ilsize + 'px !important; }'
             ];
-        applyCss(rules);
+
+        return rules.join('\n');
     }
 
+    function addCssStyles() {
+
+        var styles = _.map(sortedSizes, function (size) { return createStyles(size); });
+        $('<style/>').text(styles.join('\n')).appendTo('head');
+    }
 
     function update(mode, size) {
 
@@ -75,15 +66,23 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
         _.each(modes, function (m) {
             if (m === mode) {
                 $('#view-' + m).addClass('active');
-                content.$view.addClass('view-' + m).show();
+                content.$view.addClass('view-' + m);
             } else {
                 $('#view-' + m).removeClass('active');
                 content.$view.removeClass('view-' + m);
             }
         });
 
-        applyCssSizes(size);
+        _.each(sortedSizes, function (s) {
+            if (s === size) {
+                content.$view.addClass('view-size-' + s);
+            } else {
+                content.$view.removeClass('view-size-' + s);
+            }
+        });
         $('#view-size').val(_.indexOf(sortedSizes, size));
+
+        content.$view.show();
     }
 
     function addViewSettings() {
@@ -123,6 +122,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
 
     function init() {
 
+        addCssStyles();
         addViewSettings();
         update();
     }
diff --git a/test/tests/unit/view/viewmode.js b/test/tests/unit/view/viewmode.js
index 9b1c3204..758c78f2 100644
--- a/test/tests/unit/view/viewmode.js
+++ b/test/tests/unit/view/viewmode.js
@@ -122,6 +122,15 @@ describe('module \'' + ID + '\'', function () {
             this.applyFn();
             assert.lengthOf($('head > style'), styleTagCount + 1);
         });
+
+        it('style contains possibly correct text', function () {
+
+            this.applyFn();
+            var text = $('head > style').eq(0).text();
+            assert.isTrue(text.indexOf('#view.view-details.view-size-') >= 0);
+            assert.isTrue(text.indexOf('#view.view-grid.view-size-') >= 0);
+            assert.isTrue(text.indexOf('#view.view-icons.view-size-') >= 0);
+        });
     });
 
     describe('works', function () {