Specify subpixel direction to work around Chrome bug

WordPress · Dec 23, 2019 · 2c345a5 · 2c345a5
1 parent 494faa2
commit 2c345a5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -570,6 +570,9 @@ function BlockListBlock( {
 						className="block-editor-block-list__block-popover"
 						__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
 						__unstableSlotName="block-toolbar"
+						// Allow subpixel positioning for the block movement animation.
+						__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' }
+						__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' }
 					>
 						{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
 						{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -226,6 +226,8 @@ const Popover = ( {
 	onFocusOutside,
 	__unstableSticky,
 	__unstableSlotName = SLOT_NAME,
+	__unstableAllowVerticalSubpixelPosition,
+	__unstableAllowHorizontalSubpixelPosition,
 	/* eslint-enable no-unused-vars */
 	...contentProps
 } ) => {
@@ -254,7 +256,7 @@ const Popover = ( {
 			return;
 		}
 
-		const refresh = ( { noSubpixels } = {} ) => {
+		const refresh = ( { subpixels } = {} ) => {
 			const anchor = computeAnchorRect(
 				anchorRefFallback,
 				anchorRect,
@@ -281,15 +283,18 @@ const Popover = ( {
 			} = computePopoverPosition( anchor, contentRect.current, position, __unstableSticky, anchorRef );
 
 			if ( typeof popoverTop === 'number' && typeof popoverLeft === 'number' ) {
-				// Translate clashes with animated and arrow popovers.
-				if ( animate || ! noArrow || noSubpixels ) {
-					setStyle( containerEl, 'top', popoverTop + 'px' );
+				if ( subpixels && __unstableAllowVerticalSubpixelPosition ) {
 					setStyle( containerEl, 'left', popoverLeft + 'px' );
-					setStyle( containerEl, 'transform' );
-				} else {
 					setStyle( containerEl, 'top' );
+					setStyle( containerEl, 'transform', `translateY(${ popoverTop }px)` );
+				} else if ( subpixels && __unstableAllowHorizontalSubpixelPosition ) {
+					setStyle( containerEl, 'top', popoverTop + 'px' );
 					setStyle( containerEl, 'left' );
-					setStyle( containerEl, 'transform', `translate(${ popoverLeft }px, ${ popoverTop }px)` );
+					setStyle( containerEl, 'transform', `translate(${ popoverLeft }px)` );
+				} else {
+					setStyle( containerEl, 'top', popoverTop + 'px' );
+					setStyle( containerEl, 'left', popoverLeft + 'px' );
+					setStyle( containerEl, 'transform' );
 				}
 			}
 
@@ -320,19 +325,14 @@ const Popover = ( {
 			window.requestAnimationFrame( refresh );
 		};
 
-		// Scroll and attribute observation may render the popover on subpixels,
-		// which is good for a smooth transition, but at the end, it needs to
-		// rendered on pixels so the content is not blurry.
-		const intervalCallback = () => refresh( { noSubpixels: true } );
-
 		/*
 		 * There are sometimes we need to reposition or resize the popover that
 		 * are not handled by the resize/scroll window events (i.e. CSS changes
 		 * in the layout that changes the position of the anchor).
 		 *
 		 * For these situations, we refresh the popover every 0.5s
 		 */
-		const intervalHandle = window.setInterval( intervalCallback, 500 );
+		const intervalHandle = window.setInterval( refresh, 500 );
 
 		// Sometimes a click trigger a layout change that affects the popover
 		// position. This is an opportunity to immediately refresh rather than
@@ -343,8 +343,11 @@ const Popover = ( {
 
 		let observer;
 
-		if ( anchorRef && ! ( anchorRef instanceof window.Range ) ) {
-			observer = new window.MutationObserver( refresh );
+		if ( anchorRef && (
+			__unstableAllowVerticalSubpixelPosition ||
+			__unstableAllowHorizontalSubpixelPosition
+		) ) {
+			observer = new window.MutationObserver( () => refresh( { subpixels: true } ) );
 			observer.observe( anchorRef, { attributes: true } );
 		}
 
@@ -367,6 +370,8 @@ const Popover = ( {
 		shouldAnchorIncludePadding,
 		position,
 		__unstableSticky,
+		__unstableAllowVerticalSubpixelPosition,
+		__unstableAllowHorizontalSubpixelPosition,
 	] );
 
 	useFocusContentOnMount( focusOnMount, contentRef );