css3 flèche sur différents systèmes

Question

J'ai fait deux flèches, codées sur MacOSX, j'ai accidentellement trouvé que les flèches ne paraissaient pas bien sur les fenêtres. Est-ce dû à la résolution ou au code incorrect?

https://jsfiddle.net/m7ynysdp/

<div class="arrow a1"></div> 
<div class="arrow a2"></div> 

.arrow { 
    height: 0; 
    border-bottom: 2px solid; 
    border-width: 2px; 
    position: relative; 
    color: #000; 
} 

.a1 { 
    position: absolute; 
    top: 51%; 
    left: 76%; 
    transform: translate(-51%, -76%); 
    width: 22vw; 
    transform: rotate(-156deg); 
    transform-origin: 0; 
    border-bottom: 2px solid; 
} 

.a2 { 
    position: absolute; 
    top: 53%; 
    left: 65%; 
    transform: translate(-53%, -65%); 
    width: 6.5vw; 
    transform: rotate(-111deg); 
    transform-origin: 0; 
    border-bottom: 2px solid; 
    cursor: pointer; 
    transition: color .3s; 
} 

.arrow::before { 
    position: absolute; 
    top: -13px; 
    right: -3px; 
    content: '>'; 
    display: block; 
    font-size: 1.4rem; 
} 

Le premier est sur mac, 2ème est sous Windows, aussi bien sur Chrome dernière version

Answer 1

Il est désactivé par un pixel pour certains raison. Le changement de la position à ->top: -12px; et l'ajout d'une propriété font-weight: bold; semble résoudre le problème.

.arrow::before { 
    position: absolute; 
    top: -12px; 
    right: -3px; 
    content: '>'; 
    display: block; 
    font-size: 1.4rem; 
    font-weight: bold; 
} 

https://jsfiddle.net/oqfes3sk/

Peut-être que vous pourriez ajouter du code distinct pour Mac et PC après avoir détecté l'agent utilisateur:

jQuery(document).ready(function(){ 
if(navigator.userAgent.indexOf('Mac') > 0){ 
    jQuery('body').addClass('mac'); 
} else { 
    jQuery("body").addClass("pc"); 
} 
}); 

puis:

.mac .arrow:before { 

    ... 
    top: -13px; 

} 

.pc .arrow:before { 

    ... 
    top: -12px; 
    font-weight: bold; 

}