diff --git a/src/view/renderer.js b/src/view/renderer.js index ac6d18826..986d6dcad 100644 --- a/src/view/renderer.js +++ b/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 ); } /**