clickable phone button .svg stylesheet not clicking

Question

Hello Im having problems on a mobile phone for it to be able to touch call the number under the image. the image is being called from the stylesheet. It works fine on chrome desktop but on the mobile the green call button (bottom right) isnt working nicely on mobile. IT seems not to be sitting at the top of the page as well.

site: bittersweetcafe.com.au

.callnowbutton {
  
    width: 100px;
    right: 0;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    height: 80px;
    bottom: -20px;
    border-top: 2px solid #2dc62d;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjAgNjAiPjxwYXRoIGQ9Ik03LjEwNCAxNC4wMzJsMTUuNTg2IDEuOTg0YzAgMC0wLjAxOSAwLjUgMCAwLjk1M2MwLjAyOSAwLjc1Ni0wLjI2IDEuNTM0LTAuODA5IDIuMSBsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDE2LjUgMTcuNCAxOS44IDE5LjhsMTYuODEzIDEuMTQxYzAgMCAwIDAuNCAwIDEuMSBjLTAuMDAyIDAuNDc5LTAuMTc2IDAuOTUzLTAuNTQ5IDEuMzI3bC02LjUwNCA2LjUwNWMwIDAtMTEuMjYxIDAuOTg4LTI1LjkyNS0xMy42NzRDNi4xMTcgMjUuMyA3LjEgMTQgNy4xIDE0IiBmaWxsPSIjMDA2NzAwIi8+PHBhdGggZD0iTTcuMTA0IDEzLjAzMmw2LjUwNC02LjUwNWMwLjg5Ni0wLjg5NSAyLjMzNC0wLjY3OCAzLjEgMC4zNWw1LjU2MyA3LjggYzAuNzM4IDEgMC41IDIuNTMxLTAuMzYgMy40MjZsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDUuMyA2LjkgOS4xIDEwLjY5OWMzLjg0MiAzLjggNy40IDYuNyAxMC43IDkuMSBsNC43NC00Ljc0MmMwLjg5Ny0wLjg5NSAyLjQ3MS0xLjAyNiAzLjQ5OC0wLjI4OWw3LjY0NiA1LjQ1NWMxLjAyNSAwLjcgMS4zIDIuMiAwLjQgMy4xMDVsLTYuNTA0IDYuNSBjMCAwLTExLjI2MiAwLjk4OC0yNS45MjUtMTMuNjc0QzYuMTE3IDI0LjMgNy4xIDEzIDcuMSAxMyIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) center 2px no-repeat #090;
    box-shadow: 0 0 5px #888;
    z-index: 9999;
    background-size: 58px 58px;
    position:fixed;
    
}

   <a href="tel:0394974144">
<div class="callnowbutton">
 
</div></a>

I notice you are not specifying display:block; or display:table; which may help. Also position:fixed; can be problematic on mobile devices. — Carol McKay, Jan 18 '16 at 07:06
also and a tag inside a div makes more sense than an a tag wrapping a div — Carol McKay, Jan 18 '16 at 09:04

score 0 · Accepted Answer · edited May 23 '17 at 11:59

I would suggest the following:

<div class="callnowbutton">
    <a href="tel:0394974144"></a>
</div>

According to http://stackoverflow.com you need to add "-webkit-backface-visibility:hidden;" to your .callnowbutton class:

.callnowbutton {
    /* your code here */
    -webkit-backface-visibility:hidden;
}

It could help to:

.callnowbutton a {
    display: block; 
    width: 100%;
    height:100%;
}

clickable phone button .svg stylesheet not clicking

1 Answers1