Please whitelist cPanel in your adblocker so that you’re able to see our version release promotions, thanks!

The Community Forums

Interact with an entire community of cPanel & WHM users!

Shadow Appears in Safari for Windows (Version 5.1.7) Only

Discussion in 'General Discussion' started by buckibooster, Nov 30, 2018.

  1. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    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?
     

    Attached Files:

    #1 buckibooster, Nov 30, 2018
    Last edited by a moderator: Nov 30, 2018
  2. rpvw

    rpvw Well-Known Member

    Joined:
    Jul 18, 2013
    Messages:
    1,088
    Likes Received:
    442
    Trophy Points:
    113
    Location:
    Spain
    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
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    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.
     
  4. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    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.
     
  5. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    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.
     
  6. cPanelLauren

    cPanelLauren Forums Analyst II Staff Member

    Joined:
    Nov 14, 2017
    Messages:
    6,254
    Likes Received:
    479
    Trophy Points:
    233
    Location:
    Houston
    cPanel Access Level:
    DataCenter Provider
    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.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice