diff --git a/semantics/static/js/semantics_roles.js b/semantics/static/js/semantics_roles.js
index 3521c80..7d3fd91 100644
--- a/semantics/static/js/semantics_roles.js
+++ b/semantics/static/js/semantics_roles.js
@@ -43,13 +43,19 @@ function memorizeRoles(roles_display){
 function getStyle(frame_id, complement_num) {
     style_type = "";
     style_color = "";
-    style_value = ""
+    style_value = "";
     roles = frame_content[parseInt(frame_id)].display.roles[complement_num].argument;
     var i;
     for (i = 0; i < roles.length; i++) {
         var color = role_color[roles[i]];
         if (color.gradient != "None") {
-            style_type = "linear-gradient(to " + color.gradient + ", ";
+        	// Safari browser only
+        	if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+        		style_type = "-webkit-linear-gradient(" + color.gradient + ", ";
+        	}
+        	else {
+        		style_type = "linear-gradient(to " + color.gradient + ", ";
+        	}  
         } else {
             style_color = color.color
         }
@@ -58,7 +64,13 @@ function getStyle(frame_id, complement_num) {
         style_type = "background-color";
         style_value = "rgb(" + style_color + ")";
     } else {
-        style_value = style_type + "rgba(" + style_color + ",0.1), rgba(" + style_color + ",1))";
+    	// Safari browser only
+    	if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+    		style_value = style_type + "rgba(" + style_color + ",1), rgba(" + style_color + ",0.1))";
+    	}
+    	else {
+    		style_value = style_type + "rgba(" + style_color + ",0.1), rgba(" + style_color + ",1))";
+    	}
         style_type = "background";
     }
     return {"type": style_type, "value": style_value};