CODEWITHSUNDEEP
cssbrowsersassbox-shadow
Mickaël Leger
Mickaël Leger

Reputation: 3440

Box-shadow on div with border-radius 50% visible on Mozilla and not Chrome / Edge

I have a little CSS issue and I have no idea why :

enter image description here

As you can see, Edge and Chrome are "normal" but on Mozilla the shadow is visible and I have no idea why...I checked on canaiuse (https://caniuse.com/#feat=css-boxshadow) and I didn't see compatibility problem, someone have an idea why?

Here is the html / css of this part :

HTML

My Doctype : <!DOCTYPE html>

<div class="myclass col-5">
    <a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-yellow"><i class="fas fa-camera-retro" aria-hidden="true"></i></a>
    <a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-yellow-light"><i class="fas fa-images" aria-hidden="true"></i></a>
    <a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-grey"><i class="fas fa-cogs" aria-hidden="true"></i></a>
</div>

CSS - SASS (here is my .scss before I compile)

.myclass {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding-right: 0;

    @include position(absolute, 0, 0, null, null);

    a.btn {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        text-align: center;
        padding: 0;
        position: relative;
        transition: all .2s ease-out;
        box-shadow: 0 0 0 0 $grey-dark;
        z-index: 50;

        &:hover {
          transform: translate(2px, -2px);
          box-shadow: -2px 2px 0px 0px $grey-dark;
        }

        .fa-cogs,
        .fa-camera-retro,
        .fa-images {
          color: $white;
        }
        svg {
          display: block;
          margin: 0 auto;
          @include vertical-align();
        }
    }
}

I tried to remove the data-balloon part of my link just to see if the balloon.css I the problem but nothing change

PS : if you need the CSS after I compile tell me, but you should see what I do with the code bellow

EDIT : Here is a snippet where you can see the problem if you open it on MOZILLA 

div {
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

div a {
  display: inline-block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  position: relative;
  transition: all .2s ease-out;
  box-shadow: 0 0 0 0 black;
  z-index: 50;
  background: orange;
}

div a:hover {
  transform: translate(2px, -2px);
  box-shadow: -2px 2px 0px 0px black;
}
<div>
    <a></a>
    <a></a>
    <a></a>
</div>

Upvotes: 1

Views: 1584

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

I tested your code and its working fine. I don't see any box-shadow issue here...However if issue is there you can just set box-shadow color to transparent at normal state and change it on :hover

div {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  position: relative;
  transition: all .2s ease-out;
  box-shadow: 0 0 0 0 transparent;
  z-index: 50;
  background: orange;
}

div:hover {
  transform: translate(2px, -2px);
  box-shadow: -2px 2px 0px 0px grey;
}
<div></div>

Upvotes: 1

Related Questions