Shadow Appears in Safari for Windows (Version 5.1.7) Only

buckibooster

Member
Nov 22, 2018
11
2
3
Florida
cPanel Access Level
Website Owner
I'm not sure if this is the right forum for this issue. If not, please let me know what would be a better forum.

The Problem: I've created a web site for a local community chorus using php, javascript, AJAX and css. It appears the same in Firefox, Chrome and Internet Explorer but is different in Safari. The site displays an overlay to play audio files using html5 audio. As can be seen in the attached picture file, the css styled buttons (see red ellipses) have a dark shadow covering the top half of each styled button. These shadows do not appear in any of the other browsers. I've styled the buttons using webkit, moz, ms, o and none (see css styling code snippet below).
Code:
[INDENT].button {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   background-color: #538fbe;
   padding: 20px 20px;
//   padding: 5px 5px 5px 5px;
   font-size: 24px;
   text-align: center;
   vertical-align: middle;
   border: 1px solid #2d6898;
   background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
   background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
   background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
  
   background-image: -webkit-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(73,132,180)),
       color-stop(1, rgb(97,155,203))
   );
   background-image: -moz-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(73,132,180)),
       color-stop(1, rgb(97,155,203))
   );
   background-image: -ms-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(73,132,180)),
       color-stop(1, rgb(97,155,203))
   );
   background-image: -o-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(73,132,180)),
       color-stop(1, rgb(97,155,203))
   );
   background-image: gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(73,132,180)),
       color-stop(1, rgb(97,155,203))
   );
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   -webkit-text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   -moz-text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   -ms-text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   -o-text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   -ms-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   -o-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -ms-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
   -webkit-transform: rotateX(20deg);
   -moz-transform: rotateX(20deg);
   -ms-transform: rotateX(20deg);
   -o-transform: rotateX(20deg);
   transform: rotateX(20deg);
}[/INDENT]
Has anyone encountered this problem before. If yes, what did you do to remove the shadows?
 

Attachments

Last edited by a moderator:

rpvw

Well-Known Member
Jul 18, 2013
1,088
446
113
UK
cPanel Access Level
Root Administrator
There are many references to this using a search engine. The most popular solution seems to be that as described in this
stackoverflow post: stackoverflow.com/questions/12450776/html-input-button-css-height-not-working-on-safari-and-chrome
 

buckibooster

Member
Nov 22, 2018
11
2
3
Florida
cPanel Access Level
Website Owner
There are many references to this using a search engine. The most popular solution seems to be that as described in this
stackoverflow post: stackoverflow.com/questions/12450776/html-input-button-css-height-not-working-on-safari-and-chrome
rpvw - Thanks for the quick response but this doesn't seem to be on point. Although they may look like buttons, they are not. They are css classes made to look like a button. In my code, they are classes for hyperlinks <a></a> placed within a <div></div>. Specifically, they are:

<div id='downloadButton'><a id='downloadAudio' class='button' href='"+fileName+"' download >Download Audio File</a></div>
<div id='closeButton'><a id='closePlayer' href='javascript: off();' class='button'>ClosePlayer</a></div>​

Changing the <a> and </a> to <button> and </button> and adding "-webkit-appearance: none;" to the start of my class style did not resolve the issue. I should point out that the "Download Audio File" button appearing in the screenshot I included is the very same type of "button" and it is not affected.
 

buckibooster

Member
Nov 22, 2018
11
2
3
Florida
cPanel Access Level
Website Owner
It turned out that adding a z-index was only a partial fix. The final and most complete fix was to add "-webkit-transform:translate3d(0,0,0);" to the style sheet for the button class.