Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.
In particular:
- Chrome <= 54: Selections spanning multiple nodes return rectangles for all the parents of the endContainer. See https://code.google.com/p/chromium/issues/detail?id=324437.
- Chrome 55: Images get no rectangle when they are wrapped in a node and you select across them.
- Safari: Similar to the Chrome <= 54 bug, but only triggered near the edge of a block node, or programmatically near an inline node.
- Firefox: Similar to the Chrome <= 54 bug, but only triggered near the edge of a inline node
- Chrome: Selection across a space which spans two lines results in a bounding rectangle which doesn't cover all the individual rectangles.
- Firefox: Selections across a space which spans two lines, and text on the next line results in a bounding rectangle which doesn't cover all the individual rectangles.
There are no known issues in Edge. When no issues are detected the library will fall through to native behaviour.
Install
Usage
CommonJS
var RangeFix = require( 'rangefix' );
AMD
define( [ 'rangefix' ], function ( Rangefix ) { // ... } );
Browser global
<script src="path/to/rangefix.js"></script>
API
Replace instances of Range.prototype.getClientRects/getBoundingClientRect with RangeFix.getClientRects/getBoundingClientRect:
var range = document.getSelection().getRangeAt( 0 ); // Before var rects = range.getClientRects(); var boundingRect = range.getBoundingClientRect(); // After var rects = RangeFix.getClientRects( range ); var boundingRect = RangeFix.getBoundingClientRect( range );