diff --git a/src/components/leaf.js b/src/components/leaf.js index 641f1e3bb..603799481 100644 --- a/src/components/leaf.js +++ b/src/components/leaf.js @@ -264,7 +264,12 @@ class Leaf extends React.Component { // COMPAT: If the text is empty otherwise, it's because it's on the edge of // an inline void node, so we render a zero-width space so that the // selection can be inserted next to it still. - if (text == '') return {'\u200B'} + if (text == '') { + // COMPAT: In Chrome, zero-width space produces graphics glitches, so use + // hair space in place of it. (2017/02/12) + const space = IS_FIREFOX ? '\u200B' : '\u200A' + return {space} + } // COMPAT: Browsers will collapse trailing new lines at the end of blocks, // so we need to add an extra trailing new lines to prevent that. diff --git a/src/components/void.js b/src/components/void.js index 136fba965..24581dc98 100644 --- a/src/components/void.js +++ b/src/components/void.js @@ -91,17 +91,9 @@ class Void extends React.Component { // Make the outer wrapper relative, so the spacer can overlay it. if (node.kind === 'block') { Tag = 'div' - style = { - position: 'relative' - } + style = { position: 'relative' } } else { Tag = 'span' - // COMPAT: In Chrome, without setting `display: inline-block` the cursor - // will disappear when placed before an inline void node. (2017/02/07) - style = { - display: 'inline-block', - position: 'relative' - } } this.debug('render', { props }) @@ -146,10 +138,7 @@ class Void extends React.Component { } } else { style = { - position: 'absolute', - top: '0px', - left: '-9999px', - textIndent: '-9999px', + color: 'transparent' } } diff --git a/test/rendering/fixtures/custom-block-void/output.html b/test/rendering/fixtures/custom-block-void/output.html index 145fbd73d..0d5e8af5c 100644 --- a/test/rendering/fixtures/custom-block-void/output.html +++ b/test/rendering/fixtures/custom-block-void/output.html @@ -3,7 +3,7 @@