CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
user9485610
user9485610

Reputation:

Background color in Chrome vs. Firefox

I'm trying to get an inset effect on buttons through CSS. In Firefox this looks like in the first image, in Chrome like the second. I do not understand why and how to resolve this. Can anybody please give me a hint on what's going on? Thanks.

Firefox

enter image description here

Chrome

enter image description here

Here's the markup: 

<div id="controls">
  <div class="musicStyles"><span class="btnLetter">S</span>
    <input type="checkbox" class="box"data-value="Classic" data-key="83">
  </div>
</div>

Here's the CSS:

.btnLetter {
    font-family: 'Courier New', Courier, monospace;
    font-size: 100px;
    text-align: center;
    display: inline-block;
    margin: -7px 4px 0 0;
    color: transparent;
    background-clip: text;
    text-shadow: 2px 4px 3px  #805235;
    background-color: black ;
    font-weight: bold;   
}

#controls {
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: 300px;
    position: relative; 
}

Upvotes: 0

Views: 233

Answers (1)

Vikrant Jain
Vikrant Jain

Reputation: 135

the problem is chrome is not understanding the background-clip in css portion. So provide it like this

-webkit-background-clip: text;
-moz-background-clip: text;

instead of 

background-clip: text;

Upvotes: 1

Related Questions