fixed performance issues with gradient in Firefox (which also added gradient 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
This commit is contained in:
Anika Henke 2012-03-25 14:41:39 +01:00
parent 5e984c56d6
commit 42ff673048
3 changed files with 17 additions and 6 deletions

View File

@ -16,7 +16,8 @@ html,
body {
color: __text__;
background-color: __background_site__;
background-image: -moz-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
background-image: url(images/page-background.svg);
/*background-image: -moz-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em); see FS#2447*/
background-image: -webkit-linear-gradient(top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
background-image: -o-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
background-image: -ms-linear-gradient( top, __background_neu__ 0%, __background_alt__ 1em, __background_site__ 4em);
@ -333,7 +334,8 @@ button,
.qq-upload-button {
color: #333;
background-color: #eee;
background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
/*background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); see FS#2447*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
@ -359,10 +361,11 @@ button:focus,
.qq-upload-button:hover {
border-color: #999;
background-color: #ddd;
background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
/*background: -moz-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%); see FS#2447*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #cccccc 99%);
background: -o-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
background: -ms-linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
background: linear-gradient( top, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
}

View File

@ -119,7 +119,7 @@
.dokuwiki dl.code dt,
.dokuwiki dl.file dt {
background-color: __background_alt__;
background: -moz-linear-gradient( top, __background__ 0%, __background_alt__ 100%);
/*background: -moz-linear-gradient( top, __background__ 0%, __background_alt__ 100%); see FS#2447 */
background: -webkit-linear-gradient(top, __background__ 0%, __background_alt__ 100%);
background: -o-linear-gradient( top, __background__ 0%, __background_alt__ 100%);
background: -ms-linear-gradient( top, __background__ 0%, __background_alt__ 100%);

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#dddddd" />
<stop offset="0.1" stop-color="#eeeeee" />
<stop offset="0.4" stop-color="#fbfaf9" />
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</svg>

After

Width:  |  Height:  |  Size: 376 B