Вопрос : Каковы все свойства, которые могут складываться для смещения getBoundingClientRect
элемента блока *1003* от смещения, заданного translate()
?
Context : я работаю над сложным веб-приложением для создания контента с панелью просмотра. Пользователи могут щелкать и перетаскивать, чтобы панорамировать область просмотра, и могут нажимать кнопки боковой панели, чтобы анимировать область просмотра, перемещаясь в указанное положение c. #viewport
- это вложенный div без каких-либо специальных правил позиционирования, и он является потомком root -уровня overflow: hidden
div, который имеет width: 100vw; height: 100vh;
. Поведение панорамирования #viewport
реализовано с помощью translate()
и анимировано с помощью свойства transition
CSS.
Эта установка работала хорошо, и большую часть времени x
, y
смещение, указанное translate
точно соответствует абсолютному окну просмотра x
, y
координаты, возвращаемые https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect.
Однако в редких случаях я не смог для эффективного воспроизведения, getBoundingClientRect
возвращает значения, которые не совпадают со значениями translate
, которые я предоставляю, а #viewport
смещен относительно того, где он должен быть на дельту между значениями translate
и getBoundingClientRect
значения. Мне не удалось определить какие-либо конкретные c свойства, которые могли бы создать это смещение, поэтому я хотел бы получить список потенциальных виновников. Я знаю, что все его родительские элементы имеют getBoundingClientRect
x=0
, y=0
.