2017-10-27 2 views
1

Safari 11에서 다음과 같은 문제가 발생했습니다. body 태그를 닫기 전에 스타일을 배치 할 때 Safari 브라우저가 텍스트의 위치를 ​​"다시 페인트"또는 "다시 계산"하지 않습니다. 문제의 원인 이러한 스타일 : 당신은 여기 예제를 볼 수Safari 11 텍스트 센터 및 문자 간격 문제

h1 { 
    letter-spacing: .2em; 
    text-align: center; 
} 

. Safari에서 텍스트를 클릭하면 텍스트가 다시 나타납니다. 텍스트를 올바르게 배치하는 해결 방법이 있습니까?

http://jsfiddle.net/rauot9tq/3/ 또는 아래 그림에 http://jsfiddle.net/rauot9tq/4/

,이 첫 번째 행에 잘못된 문자이고 두 번째 줄에 클릭 할 때 두배 :

enter image description here

답변

0

대답에 이 문제는 Safari에서 콘텐츠를 다시 렌더링하도록 강제하는 것입니다. 순수한 css 용액은 예를 들어. 에 <head> 요소에 스타일을 설정합니다 :

body { 
    display: none; 
} 

및 바닥 글 :

여기
body { 
    display: block; 
} 

이 작업 바이올린을 업데이트된다 : http://jsfiddle.net/rauot9tq/10/


또 다른 soulution는 다시 그리기 Safari를 강제로 수 JS 사용 :

document.querySelector('body').style.display = 'none'; 
document.querySelector('body').offsetWidth; 
document.querySelector('body').style.display = 'block'; 

JS 솔루션으로 바이올린 : http://jsfiddle.net/rauot9tq/11/