Material-design-lite: 툴팁의 잘못된 위치

에 만든 2015년 07월 08일 · 3코멘트 · 출처: google/material-design-lite

더 많은 경우가 있지만 그럼에도 불구하고 현재 개발 중인 앱에서 발생합니다. 이 시나리오는 스크롤 막대가 있고 해당 요소에 CSS를 통해 번역이 적용된 경우에만 발생합니다.

이와 같은 것이 이론적으로 문제를 해결할 것입니다 (제 생각에는)

let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;

// now we have a more accurate representation of the current top / left coords

P1 Tooltip

출처

brandonjpierce

가장 유용한 댓글

틸!

관찰된 동작은 CSS 사양 에 따라 정확합니다.

레이아웃이 CSS 상자 모델에 의해 제어되는 요소의 경우 변환에 대해 none 이외의 값을 사용하면 스택 컨텍스트와 포함 블록이 모두 생성됩니다. 개체는 위치가 고정된 하위 항목을 포함하는 블록 역할을 합니다.

툴팁은 position: fixed 를 사용하여 배치됩니다. 즉, 변환을 적용하여 NOP인 경우에도 고정 위치 지정을 위해 원점을 이동했습니다.

쉬운 수정 은 툴팁을 다른 컨테이너(또는 body )로 옮기는 것입니다.

surma 에 2015년 07월 09일

👍4

모든 3 댓글

흥미로운 버그. 변환으로 인해 발생하는 것을 확인할 수 있지만 _이유_를 이해하지 못합니다. 이것은 최근 웹에서 애니메이션을 추진하면서 꽤 일반적인 일이 될 수 있기 때문에 해결되어야 합니다.

Garbee 에 2015년 07월 08일

틸!

관찰된 동작은 CSS 사양 에 따라 정확합니다.

레이아웃이 CSS 상자 모델에 의해 제어되는 요소의 경우 변환에 대해 none 이외의 값을 사용하면 스택 컨텍스트와 포함 블록이 모두 생성됩니다. 개체는 위치가 고정된 하위 항목을 포함하는 블록 역할을 합니다.

툴팁은 position: fixed 를 사용하여 배치됩니다. 즉, 변환을 적용하여 NOP인 경우에도 고정 위치 지정을 위해 원점을 이동했습니다.

쉬운 수정 은 툴팁을 다른 컨테이너(또는 body )로 옮기는 것입니다.

surma 에 2015년 07월 09일

👍4

흠, 매우 흥미롭습니다. 적어도 우리는 지금 알고 있고 만약 그것이 다시 발생한다면 여기 사람들을 지적할 수 있습니다. @surma 연구를 해주셔서 감사합니다!

Garbee 에 2015년 07월 09일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-design-lite: 툴팁의 잘못된 위치

가장 유용한 댓글

모든 3 댓글

관련 문제