https://github.com/edg2s/rangefix
Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.
https://github.com/edg2s/rangefix
javascript polyfill workaround
Last synced: 6 months ago
JSON representation
Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.
- Host: GitHub
- URL: https://github.com/edg2s/rangefix
- Owner: edg2s
- License: other
- Created: 2014-09-17T17:44:17.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T22:16:59.000Z (over 2 years ago)
- Last Synced: 2024-10-30T00:10:13.137Z (about 1 year ago)
- Topics: javascript, polyfill, workaround
- Language: JavaScript
- Homepage:
- Size: 374 KB
- Stars: 37
- Watchers: 4
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
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
=======
```bash
$ npm install rangefix
```
Usage
=====
**CommonJS**
```javascript
var RangeFix = require( 'rangefix' );
```
**AMD**
```javascript
define( [ 'rangefix' ], function ( Rangefix ) {
// ...
} );
```
**Browser global**
```html
```
**API**
Replace instances of `Range.prototype.getClientRects`/`getBoundingClientRect` with `RangeFix.getClientRects`/`getBoundingClientRect`:
```javascript
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 );
```
Demo
====
http://edg2s.github.io/rangefix/