8
0
Просмотр исходного кода

Fixed: getOptimalPosition utility does not consider scroll positions and border-width correctly.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
23ccac1523
1 измененных файлов с 18 добавлено и 3 удалено
  1. 18 3
      packages/ckeditor5-utils/src/dom/position.js

+ 18 - 3
packages/ckeditor5-utils/src/dom/position.js

@@ -99,14 +99,29 @@ export function getOptimalPosition( { element, target, positions, limiter, fitIn
 
 	let { left, top } = getAbsoluteRectCoordinates( bestPosition );
 
-	// (#126) If there's some positioned ancestor of the panel, then its rect must be taken into
-	// consideration. `Rect` is always relative to the viewport while `position: absolute` works
-	// with respect to that positioned ancestor.
 	if ( positionedElementAncestor ) {
 		const ancestorPosition = getAbsoluteRectCoordinates( new Rect( positionedElementAncestor ) );
+		const ancestorComputedStyles = global.window.getComputedStyle( positionedElementAncestor );
 
+		// (#126) If there's some positioned ancestor of the panel, then its rect must be taken into
+		// consideration. `Rect` is always relative to the viewport while `position: absolute` works
+		// with respect to that positioned ancestor.
 		left -= ancestorPosition.left;
 		top -= ancestorPosition.top;
+
+		// (https://github.com/ckeditor/ckeditor5-utils/tree/t/139)
+		// If there's some positioned ancestor of the panel, not its position must be taken into
+		// consideration (see above) but also its internal scrolls. Scroll have an impact on Rect which,
+		// again, is relative to the viewport, while position: absolute includes scrolling.
+		left += positionedElementAncestor.scrollLeft;
+		top += positionedElementAncestor.scrollTop;
+
+		// (https://github.com/ckeditor/ckeditor5-utils/tree/t/139)
+		// If there's some positioned ancestor of the panel, then its rect contains it's border
+		// while `position: absolute` positioning does not consider it. E.g. { top: 0, left: 0 }
+		// means upper left corner of the element, not upper-left corner of its border.
+		left -= parseInt( ancestorComputedStyles.borderLeftWidth, 10 );
+		top -= parseInt( ancestorComputedStyles.borderTopWidth, 10 );
 	}
 
 	return { left, top, name };