diff --git a/openlp/core/lib/__init__.py b/openlp/core/lib/__init__.py
index b76179c2c..721b6ae23 100644
--- a/openlp/core/lib/__init__.py
+++ b/openlp/core/lib/__init__.py
@@ -39,40 +39,40 @@ log = logging.getLogger(__name__)
 html_expands = []
 
 html_expands.append({u'desc':u'Red', u'start tag':u'{r}', \
-                          u'start html':u'<font color=red>', \
-                          u'end tag':u'{/r}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:red">', \
+                          u'end tag':u'{/r}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Black', u'start tag':u'{b}', \
-                          u'start html':u'<font color=black>', \
-                          u'end tag':u'{/b}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:black">', \
+                          u'end tag':u'{/b}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Blue', u'start tag':u'{bl}', \
-                          u'start html':u'<font color=blue>', \
-                          u'end tag':u'{/bl}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:blue">', \
+                          u'end tag':u'{/bl}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Yellow', u'start tag':u'{y}', \
-                          u'start html':u'<font color=yellow>', \
-                          u'end tag':u'{/y}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:yellow">', \
+                          u'end tag':u'{/y}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Green', u'start tag':u'{g}', \
-                          u'start html':u'<font color=green>', \
-                          u'end tag':u'{/g}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:green">', \
+                          u'end tag':u'{/g}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Pink', u'start tag':u'{pk}', \
-                          u'start html':u'<font color=#CC33CC>', \
-                          u'end tag':u'{/pk}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:#CC33CC">', \
+                          u'end tag':u'{/pk}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Orange', u'start tag':u'{o}', \
-                          u'start html':u'<font color=#CC0033>', \
-                          u'end tag':u'{/o}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:#CC0033">', \
+                          u'end tag':u'{/o}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Purple', u'start tag':u'{pp}', \
-                          u'start html':u'<font color=#9900FF>', \
-                          u'end tag':u'{/pp}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:#9900FF">', \
+                          u'end tag':u'{/pp}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'White', u'start tag':u'{w}', \
-                          u'start html':u'<font color=white>', \
-                          u'end tag':u'{/w}', u'end html':u'</font>', \
+                          u'start html':u'<span style="-webkit-text-fill-color:white">', \
+                          u'end tag':u'{/w}', u'end html':u'</span>', \
                           u'protected':False})
 html_expands.append({u'desc':u'Superscript', u'start tag':u'{su}', \
                           u'start html':u'<sup>', \
diff --git a/openlp/core/lib/htmlbuilder.py b/openlp/core/lib/htmlbuilder.py
index dffa5deec..d03b7f7cc 100644
--- a/openlp/core/lib/htmlbuilder.py
+++ b/openlp/core/lib/htmlbuilder.py
@@ -217,11 +217,12 @@ body {
             text.innerHTML = newtext;
             return;
         }
-        if(text.style.opacity=='') text.style.opacity = 1;
         if(newtext==text.innerHTML){
             text.style.opacity = parseFloat(text.style.opacity) + 0.3;
+            if(text.style.opacity>0.7)
+                text.style.opacity = 1;
         } else {
-            text.style.opacity -= 0.3;
+            text.style.opacity = parseFloat(text.style.opacity) - 0.3;
             if(text.style.opacity<=0.1){
                 text.innerHTML = newtext;
             }
@@ -400,14 +401,15 @@ def build_lyrics_html(item, webkitvers):
     theme = item.themedata
     if webkitvers < 534.4 and theme and theme.display_outline:
         lyrics += u'<div class="lyricstable">' \
-            u'<div id="lyricsshadow" class="lyricscell lyricsshadow">' \
-            u'</div></div>'
+            u'<div id="lyricsshadow" style="opacity:1" ' \
+            u'class="lyricscell lyricsshadow"></div></div>'
         if webkitvers < 533.3:
             lyrics += u'<div class="lyricstable">' \
-                u'<div id="lyricsoutline" class="lyricscell lyricsoutline">' \
-                u'</div></div>'
+                u'<div id="lyricsoutline" style="opacity:1" ' \
+                u'class="lyricscell lyricsoutline"></div></div>'
     lyrics += u'<div class="lyricstable">' \
-        u'<div id="lyricsmain" class="lyricscell lyricsmain"></div></div>'
+        u'<div id="lyricsmain" style="opacity:1" ' \
+        u'class="lyricscell lyricsmain"></div></div>'
     return lyrics
     
 def build_footer_css(item):