Shadow Appears in Safari for Windows (Version 5.1.7) Only

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).


.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);
}

Has anyone encountered this problem before. If yes, what did you do to remove the shadows?

rpvw

November 30, 2018 21:10

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

November 30, 2018 21:39

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 placed within a

. Specifically, they are:

Download Audio File

ClosePlayer

Changing the and to and 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.

December 01, 2018 02:53

Problem Solved: I'm not sure why, but I was able to eliminate the problem by adding a "z-index: 20;" to the style sheet for the "Close Player" button.

December 01, 2018 23:51

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.

cPanelLauren

December 03, 2018 19:21

Hi @buckibooster I'm really happy to see you were able to find a solution for the issue and thanks for letting us know how you solved the problem.

Shadow Appears in Safari for Windows (Version 5.1.7) Only

Comments

Didn't find what you were looking for?