Merge pull request #1246 from ckeditor/t/ckeditor5/752

Fix: The fake selection container will not leak into the viewport. Closes ckeditor/ckeditor5#752.

Author: Reinmar

src/view/renderer.js

@@ -567,35 +567,42 @@ export default class Renderer {
 	 */
 	_updateFakeSelection( domRoot ) {
 		const domDocument = domRoot.ownerDocument;
+		let container = this._fakeSelectionContainer;
 
 		// Create fake selection container if one does not exist.
-		if ( !this._fakeSelectionContainer ) {
-			this._fakeSelectionContainer = domDocument.createElement( 'div' );
-			this._fakeSelectionContainer.style.position = 'fixed';
-			this._fakeSelectionContainer.style.top = 0;
-			this._fakeSelectionContainer.style.left = '-9999px';
-			this._fakeSelectionContainer.appendChild( domDocument.createTextNode( '\u00A0' ) );
+		if ( !container ) {
+			this._fakeSelectionContainer = container = domDocument.createElement( 'div' );
+
+			Object.assign( container.style, {
+				position: 'fixed',
+				top: 0,
+				left: '-9999px',
+				// See https://github.com/ckeditor/ckeditor5/issues/752.
+				width: '42px'
+			} );
+
+			// Fill it with a text node so we can update it later.
+			container.appendChild( domDocument.createTextNode( '\u00A0' ) );
 		}
 
 		// Add fake container if not already added.
-		if ( !this._fakeSelectionContainer.parentElement ) {
-			domRoot.appendChild( this._fakeSelectionContainer );
+		if ( !container.parentElement ) {
+			domRoot.appendChild( container );
 		}
 
 		// Update contents.
-		const content = this.selection.fakeSelectionLabel || '\u00A0';
-		this._fakeSelectionContainer.firstChild.data = content;
+		container.firstChild.data = this.selection.fakeSelectionLabel || '\u00A0';
 
 		// Update selection.
 		const domSelection = domDocument.getSelection();
-		domSelection.removeAllRanges();
-
 		const domRange = domDocument.createRange();
-		domRange.selectNodeContents( this._fakeSelectionContainer );
+
+		domSelection.removeAllRanges();
+		domRange.selectNodeContents( container );
 		domSelection.addRange( domRange );
 
 		// Bind fake selection container with current selection.
-		this.domConverter.bindFakeSelection( this._fakeSelectionContainer, this.selection );
+		this.domConverter.bindFakeSelection( container, this.selection );
 	}
 
 	/**