Skip to content
This repository
Browse code

fixed performance issues with gradient in Firefox (which also added g…

…radient support for IE9) (FS#2447)

* removed all occurrences of '-moz-linear-gradient'
* added SVG as fallback for Firefox, IE9 and other browsers to page background and buttons
  • Loading branch information...
commit 42ff673048d169bcbec5e4bb17619d66e6f6f61d 1 parent 5e984c5
Anika Henke authored
13  lib/tpl/dokuwiki/css/basic.css
@@ -16,7 +16,8 @@ html,
16 16
 body {
17 17
     color: __text__;
18 18
     background-color: __background_site__;
19  
-    background-image: -moz-linear-gradient(   top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
  19
+    background-image: url(images/page-background.svg);
  20
+    /*background-image: -moz-linear-gradient(   top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em); see FS#2447*/
20 21
     background-image: -webkit-linear-gradient(top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
21 22
     background-image: -o-linear-gradient(     top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
22 23
     background-image: -ms-linear-gradient(    top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
@@ -333,7 +334,8 @@ button,
333 334
 .qq-upload-button {
334 335
     color: #333;
335 336
     background-color: #eee;
336  
-    background: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
  337
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
  338
+    /*background: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); see FS#2447*/
337 339
     background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
338 340
     background: -o-linear-gradient(     top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
339 341
     background: -ms-linear-gradient(    top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
@@ -359,10 +361,11 @@ button:focus,
359 361
 .qq-upload-button:hover {
360 362
     border-color: #999;
361 363
     background-color: #ddd;
362  
-    background: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
  364
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
  365
+    /*background: -moz-linear-gradient(   top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%); see FS#2447*/
363 366
     background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
364  
-    background: -o-linear-gradient(     top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
365  
-    background: -ms-linear-gradient(    top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
  367
+    background: -o-linear-gradient(     top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
  368
+    background: -ms-linear-gradient(    top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
366 369
     background: linear-gradient(        top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
367 370
 }
368 371
 
2  lib/tpl/dokuwiki/css/content.css
@@ -119,7 +119,7 @@
119 119
 .dokuwiki dl.code dt,
120 120
 .dokuwiki dl.file dt {
121 121
     background-color: __background_alt__;
122  
-    background: -moz-linear-gradient(   top, __background__ 0%, __background_alt__ 100%);
  122
+    /*background: -moz-linear-gradient(   top, __background__ 0%, __background_alt__ 100%); see FS#2447 */
123 123
     background: -webkit-linear-gradient(top, __background__ 0%, __background_alt__ 100%);
124 124
     background: -o-linear-gradient(     top, __background__ 0%, __background_alt__ 100%);
125 125
     background: -ms-linear-gradient(    top, __background__ 0%, __background_alt__ 100%);
8  lib/tpl/dokuwiki/images/page-background.svg
... ...
@@ -0,0 +1,8 @@
  1
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  2
+    <linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
  3
+        <stop offset="0" stop-color="#dddddd" />
  4
+        <stop offset="0.1" stop-color="#eeeeee" />
  5
+        <stop offset="0.4" stop-color="#fbfaf9" />
  6
+    </linearGradient>
  7
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
  8
+</svg>

0 notes on commit 42ff673

Please sign in to comment.
Something went wrong with that request. Please try again.