Windows의 Chrome에서 Blurry CSS 툴팁

개인적으로 문제를 재현 할 수는 없지만 툴팁 내의 텍스트가 흐리게 보입니다. 최신 Windows 컴퓨터에서 Chrome의 최신 버전을 실행 중입니다. 그녀는 텍스트가 말하는 것을 알아내는 것은 꽤 어렵다고 말합니다.Windows의 Chrome에서 Blurry CSS 툴팁

/* The question mark that the user clicks on */ 
 
.tooltip_wrapper { 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    padding: 0 10px; 
 
    background: #ececec; 
 
    color: #555; 
 
    cursor: help; 
 
    font-family: "Gill Sans", Impact, sans-serif; 
 
    position: relative; 
 
    text-align: center; 
 
    -webkit-transform: translateZ(0); /* WebKit flicker fix */ 
 
    -webkit-font-smoothing: antialiased; /* WebKit text rendering fix */ 
 
    z-index: 900; 
 
} 
 

 
.tooltip_wrapper .tooltip { 
 
    background: #1496bb; 
 
    bottom: 100%; 
 
    color: #fff; 
 
    display: block; 
 
    left: -25px; 
 
    margin-bottom: 15px; 
 
    opacity: 0; /* This hides the box when not hovering */ 
 
    padding: 20px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    width: 400px; 
 
    -webkit-transform: translate(10px); 
 
    -moz-transform: translate(10px); 
 
     -ms-transform: translate(10px); 
 
     -o-transform: translate(10px); 
 
      transform: translate(10px); 
 
/* These used to be all translateY */ 
 
    -webkit-transition: all .25s ease-out; 
 
    -moz-transition: all .25s ease-out; 
 
     -ms-transition: all .25s ease-out; 
 
     -o-transition: all .25s ease-out; 
 
      transition: all .25s ease-out; 
 
    /* -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
 
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
 
     -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
 
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
 
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); */ 
 
} 
 

 
/* This bridges the gap so you can mouse into the tooltip without it disappearing */ 
 
.tooltip_wrapper .tooltip:before { 
 
    bottom: -20px; 
 
    content: " "; 
 
    display: block; 
 
    height: 20px; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
/* CSS Triangles - see Trevor's post */ 
 
.tooltip_wrapper .tooltip:after { 
 
    border-left: solid transparent 10px; 
 
    border-right: solid transparent 10px; 
 
    border-top: solid #1496bb 10px; 
 
    bottom: -10px; 
 
    content: " "; 
 
    height: 0; 
 
    right: 88%; 
 
    margin-left: -13px; 
 
    position: absolute; 
 
    width: 0; 
 
} 
 

 
.tooltip_wrapper:hover .tooltip { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
    -webkit-transform: translate(0px); 
 
    -moz-transform: translate(0px); 
 
     -ms-transform: translate(0px); 
 
     -o-transform: translate(0px); 
 
      transform: translate(0px); 
 
/* These used to be all translateY */ 
 
} 
 

 
/* Internet Explorer can just show/hide with no transition */ 
 
.lte8 .tooltip_wrapper .tooltip { 
 
    display: none; 
 
} 
 
.lte8 .tooltip_wrapper:hover .tooltip { 
 
    display: block; 
 
}

<h1> 
 
Some header to create space 
 
</h1> 
 

 
<div class='tooltip_wrapper'>?<div class='tooltip'>This is the tooltip text</div></div>

가 나는 https://jsfiddle.net/rsnbtph7/#&togetherjs=xDN35iPAvV도 해당 사이트에 JSFiddle 설정했습니다.

어디에서 이러한 사용자가 불이익을받지 않도록 코드를 조정해야합니까?!

출처

2016-06-08 Kimberly-Ann

최신 크롬에서 확인하기 가능하다. –

문제는 Windows에서 글꼴을 표시하려고하는 것입니다. 그 폰트가 픽셀 수의 2 배인 망막 맥을 위해 디자인되었다고 상상해 봅니다. 유일한 옵션은 글꼴 크기를 늘리거나 글꼴을 변경하는 것입니다. 추신 : 파이어 폭스는 약간만 더 읽기 쉽다. –

아, 그 말이 많다.이 사이트 (http://www.cssfontstack.com)는 윈도우가 길 샌즈를 58 % 만 지원한다고 말한다. 글씨체를 바꾸면 그것을 치료할 수 있습니까? 나는 꽤 볼 수 없게 좌절하고있다! –

CalvT 한 번에 가져 왔습니다. 글꼴을 Arial로 변경 했으므로 문제가 해결되었습니다.

출처

2016-07-14 15:40:31

Windows의 Chrome에서 Blurry CSS 툴팁

답변

관련 문제