CSS breadcrumbs sont à la recherche floue dans firefox

Question

Mes breadcrumbs de flèches regardent un peu flou dans firefox mais bien dans le chrome, l'opéra et ie. CODEPEN

Voilà comment il ressemble dans Firefox:

Mon HTML

<div class="row"> 
    <div class="tab-progress btn-breadcrumb clearfix text-center"> 
    <div class="arrow-nav col-xs-4">1</div> 
    <div class="arrow-nav col-xs-4">2</div> 
    <div class="active-arrow arrow-nav col-xs-4">3</div> 
    </div> 
</div> 

CSS:

body { 
 
    padding: 3em; 
 
    background: #B9B9B9; 
 
} 
 
.row { 
 
    background: white; 
 
} 
 
.btn-breadcrumb .arrow-nav:not(:last-child):after { 
 
    content: " "; 
 
    display: flex !important; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 27px solid rgba(255, 255, 255, 0); 
 
    border-bottom: 27px solid rgba(255, 255, 255, 0); 
 
    border-left: 10px solid white; 
 
    position: absolute; 
 
    top: 33%; 
 
    margin-top: -17px; 
 
    left: 100%; 
 
    z-index: 3; 
 
} 
 
.btn-breadcrumb .arrow-nav:not(:last-child):before { 
 
    content: " "; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 27px solid rgba(255, 255, 255, 0); 
 
    border-bottom: 27px solid rgba(255, 255, 255, 0); 
 
    border-left: 10px solid #E6E6E6; 
 
    position: absolute; 
 
    top: 33%; 
 
    margin-top: -17px; 
 
    margin-left: 1px; 
 
    left: 100%; 
 
    z-index: 3; 
 
} 
 
.btn-breadcrumb .arrow-nav { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.btn-breadcrumb .arrow-nav:first-child { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.btn-breadcrumb .arrow-nav:last-child { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.active-arrow { 
 
    background-color: #2a53a5; 
 
    color: white; 
 
    border-radius: 0; 
 
} 
 
.active-arrow .numberCircle { 
 
    color: white; 
 
} 
 
.active-arrow:hover { 
 
    color: white; 
 
} 
 
.active-arrow:after { 
 
    display: flex !important; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 17px solid rgba(255, 255, 255, 0); 
 
    border-bottom: 17px solid rgba(255, 255, 255, 0); 
 
    border-left: 10px solid #2a53a5 !important; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -17px; 
 
    border-radius: 0; 
 
    left: 100%; 
 
    z-index: 3; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="tab-progress btn-breadcrumb clearfix text-center"> 
 
    <div class="arrow-nav col-xs-4">1</div> 
 
    <div class="arrow-nav col-xs-4">2</div> 
 
    <div class="active-arrow arrow-nav col-xs-4">3</div> 
 
    </div> 
 
</div>

Answer 1

Je pense que j'ai une compréhension de ce que vous voulez mais vous CSS est un peu out. J'ai défini le active-arrow comme étant celui qui crée réellement les flèches afin qu'il sache exactement sur lequel le faire, quelle que soit sa position.

body { 
 
    padding: 3em; 
 
    background: #B9B9B9; 
 
} 
 
.row { 
 
    background: white; 
 
} 
 
.btn-breadcrumb .arrow-nav { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.btn-breadcrumb .arrow-nav:first-child { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.btn-breadcrumb .arrow-nav:last-child { 
 
    padding: 15px 0 15px 0; 
 
} 
 
.active-arrow { 
 
    background-color: #2a53a5; 
 
    color: white; 
 
    border-radius: 0; 
 
} 
 
.active-arrow .numberCircle { 
 
    color: white; 
 
} 
 
.active-arrow:hover { 
 
    color: white; 
 
} 
 
.active-arrow:before { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 25px solid rgba(255, 255, 255, 0); 
 
    border-bottom: 25px solid rgba(255, 255, 255, 0); 
 
    border-left: 10px solid white; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.active-arrow:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 25px dotted white; 
 
    border-bottom: 25px dotted white; 
 
    border-left: 10px dotted rgba(255, 255, 255, 0); 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.arrow-nav:last-child.active-arrow:after { 
 
    border: none; 
 
} 
 
.arrow-nav:not(.active-arrow):before { 
 
    content: ''; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    border-left: 10px solid grey; 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 0; 
 
} 
 
.arrow-nav:not(.active-arrow):after { 
 
    content: ''; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    border-left: 10px solid white; 
 
    position: absolute; 
 
    right: -9px; 
 
    top: 0; 
 
} 
 
.arrow-nav:last-child:not(.active-arrow):after, 
 
.arrow-nav:last-child:not(.active-arrow):before { 
 
    border: 0; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="tab-progress btn-breadcrumb clearfix text-center"> 
 
    <div class="arrow-nav col-xs-4">1</div> 
 
    <div class="arrow-nav col-xs-4">2</div> 
 
    <div class="active-arrow arrow-nav col-xs-4">3</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="tab-progress btn-breadcrumb clearfix text-center"> 
 
    <div class="arrow-nav col-xs-4">1</div> 
 
    <div class="active-arrow arrow-nav col-xs-4">2</div> 
 
    <div class="arrow-nav col-xs-4">3</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="tab-progress btn-breadcrumb clearfix text-center"> 
 
    <div class="arrow-nav col-xs-4">1</div> 
 
    <div class="arrow-nav col-xs-4">2</div> 
 
    <div class="arrow-nav col-xs-4">3</div> 
 
    </div> 
 
</div>