"auto"span의보고 된 너비가 실제 렌더링 된 너비보다 큽니다

Question

pdf.js을 사용하여 렌더링 된 텍스트의 선택 부분에 하이라이트를 만들기 위해 rangy을 사용하고 있습니다. 강조 표시된 span에 대한 CSS는 매우 간단합니다 : 배회에 연속 하이라이트 이후

.image-highlight { 
    background-color: rgba(152, 210, 146, 0.45); 
    border: 1px solid #000000; //added this for debugging. 
    cursor: pointer; 
} 

가 그때 돌아 다니기에 알맞은 장소에 의해 생성 된 높이와 span의 폭을 복사하기 위해 노력하고있어, 이전의 하이라이트에 따라 달라집니다 다른 루트 노드에 있습니다. 그러나 새로 만든 span의 너비가 원래 span보다 큽니다. Chrome이 span의 px에 대해 동일한 너비를보고한다는 점도 실망 스럽습니다.

(넓은 의해 만들어진) 제 span의 폭 현상 툴바 Metrics 하에서 보았을 때 제 스팬에 대한 폭 (I 만드는 것이) 명시 $.width 통해 설정되는 반면, 크롬에 의해보고 auto의 폭을 갖고 . 폭이 모두 span들에 대한 동일한 것으로보고 크롬의

var $selectionSpan = jQuery("<span></span>"). 
    attr("id", "created-" + new Date().getTime()). 
    css("position", "absolute"). 
    css("z-index", 999). 
    offset({ 
     top: $span.offset().top, 
     left: $span.offset().left 
    }). 
    height($span.height()). 
    width($span.width()); 

$selectionSpan.get(0).className = $span.get(0).className; 

그리고 여기이 사진 : 여기

내가 span 이상을 복사하고 어떻게

보시다시피 폭은 분명히 다르더라도 112px으로보고됩니다. 왜 이런 일이 일어나는 걸까요?

Answer 1

나는 이것을 알아 냈다. 이는 pdf.js가 CSS3 축척 변환을 적용했기 때문입니다. Chrome이 변형 된 너비가 아니라 변형 된 너비가 아니라고보고 할 것이라고 기대하지만 Chrome 버그 일 수 있습니다.

는 내가 만드는 코드에 다음을 추가하여이 문제를 해결할 수 있었다 나의 span :

var $selectionSpan = jQuery("<span></span>"). 
    attr("id", "created-" + new Date().getTime()). 
    css("position", "absolute"). 
    css("z-index", 999). 
    offset({ 
     top: $span.offset().top, 
     left: $span.offset().left 
    }). 
    height($span.height()). 
    width($span.width()). 
    css("-webkit-transform", $span.parent("div").css("-webkit-transform")). 
    css("-moz-transform", $span.parent("div").css("-moz-transform")). 
    css("-ms-transform", $span.parent("div").css("-ms-transform")). 
    css("-o-transform", $span.parent("div").css("-o-transform")). 
    css("-transform", $span.parent("div").css("-transform")). 
    css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")). 
    css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")). 
    css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")). 
    css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")). 
    css("-transform-origin", $span.parent("div").css("-transform-origin")); 

:

는

css("-webkit-transform", $span.parent("div").css("-webkit-transform")). 
css("-moz-transform", $span.parent("div").css("-moz-transform")). 
css("-ms-transform", $span.parent("div").css("-ms-transform")). 
css("-o-transform", $span.parent("div").css("-o-transform")). 
css("-transform", $span.parent("div").css("-transform")). 
css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")). 
css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")). 
css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")). 
css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")). 
css("-transform-origin", $span.parent("div").css("-transform-origin")); 

그래서 전체 코드는 다음과 같습니다