배경에서 픽셀 줄을 자르는 텍스트

Question

또 다른 매우 이상한 질문으로 다시 돌아 왔습니다.

어구의 마지막 문자 "k"가 부모 배경에서 픽셀의 점선을 잘라내는 원인은 무엇입니까? 나는 해결책을 가지고 있으며, 가장 우아하지 않을 수도 있고 다른 사람들에게 개방적 일 수도 있습니다. 그러나 이것이 왜 일어나고 있는지에 정말로 관심이 있습니다.

나는 스크롤러를 가지고 있는데, 지금은 텍스트를 슬라이딩하여 애니메이션을 테스트 해 보았습니다. 나는 이것을 날카로운 모서리없이 문자로 시험했으며 아무런 문제가 없지만 "T와 k"(가능하면 다른 문자)를 배경으로 잘라냅니다.

"T"맨 위에 동일한 효과를 주지만 선은 배경에 아주 가까운 파란색입니다.

Firefox와 IE에서 잘 작동합니다. 집에서 Mac을 사용하기 때문에 확신 할 수 없습니다. Chrome과 Safari에서이 문제가 발생합니다. 여기

은 당신이 배경으로 잘라 다시 슬라이드로 텍스트 버튼을 다시 전환 할 때,

어떻게 보이는지의 이미지이며, 점선 또는 높이 컷이 1px 잎 직선.

버튼을 다시 클릭하면 멈출 때까지 돌아가고 한 번 더 클릭하면 실선이 그려집니다.

여기 여기

.text { 
    right: 50%; 
    text-align: left; 
    font-size: 1.5em; 
    font-family: "century gothic"; 
    position: absolute; 
    color: #f7f7f7; 
    transition: right 3s ease-in; 
    -webkit-transition: right 3s ease-in; 
    -moz-transition: right 3s ease-in; 
} 

.text.active { 
    right: 2%; 
} 

.text > li { 
    display: inline-block; 
} 

는 코드와 문제에서 피크를 취할 수있는 JSFIDDLE이다, 텍스트에 포함 된 것과 관련 css입니다.

이 문제의 해결책은 이미 here입니다.

나는 li에서 :before 및 :after을 사용하여 양쪽으로 공백을 만들어 배경으로 자르지 않았습니다.

나는 이것에 모든 입력을 주셔서 감사합니다!

Answer 1

거의 확실하게 표시 버그 인 것 같습니다. 문제를 해결 한 다음 솔루션을 기반으로, 나는 텍스트의 li이 ul에 약간 겹쳐서 고스트가 발생하는 애니메이션 중에 표시되는 것으로 의심됩니다. Chrome에서 inspector 도구로 li을 선택하고 선택 항목이 파란색으로 강조 표시되면 이 k 중첩되는 것을 볼 수 있다고 생각합니다.

나는 그보다 더 나은 설명을 줄 수 있을지 확신하지 못한다. 글자 크기가 li 인 텍스트 글꼴로 된 버그 인 것 같다.1 padding-right: 1px

이는 .text (ul) 요소 중 하나에 일 (example)를 추가

# 또는 :

그러나 모든 다음은 의사 요소보다는 당신의 문제에 더 우아한 해결책이 될 수 있습니다 요소 (example).

# 2 추가 overflow: hidden

이는 .text (ul) 요소 (example)이다.

# 3은 오른쪽 효과를 상쇄 (필요한 경우)도 ul (example)의 여부를 해결하기 margin-right: -1px와 border-right: 1px solid transparent 퍼팅

투명 테두리 또는 li (example)를 추가한다.

# 4는 li (example)에 margin-right: 1px

이 단지 작품을 추가합니다.

결론

기본적으로, 원래 의사 요소 솔루션과 위의와, 그 오른쪽 가장자리에 버퍼를 제공 아무것도 일어나는 버그를 방지 할 것으로 보인다.