• Home
  • History
  • Annotate
Name Date Size #Lines LOC

..03-May-2022-

README.mdH A D30-Sep-20211.6 KiB6243

README.md

1Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.
2
3In particular:
4
5* 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.
6* Chrome 55: Images get no rectangle when they are wrapped in a node and you select across them.
7* Safari: Similar to the Chrome <= 54 bug, but only triggered near the edge of a block node, or programmatically near an inline node.
8* Firefox: Similar to the Chrome <= 54 bug, but only triggered near the edge of a inline node
9* IE <= 10: Rectangles are incorrectly scaled when using the browser's zoom feature.
10
11There are no known issues in Chrome >= 56, Edge and IE >= 11. In these browsers the library will fall through to native behaviour.
12
13Install
14=======
15
16```bash
17$ npm install rangefix
18```
19
20Usage
21=====
22
23**CommonJS**
24
25```javascript
26var RangeFix = require( 'rangefix' );
27```
28
29**AMD**
30
31```javascript
32define( [ 'rangefix' ], function( Rangefix ) {
33	// ...
34} );
35```
36
37**Browser global**
38
39```html
40<script src="path/to/rangefix.js"></script>
41```
42
43**API**
44
45Replace instances of `Range.prototype.getClientRects`/`getBoundingClientRect` with `RangeFix.getClientRects`/`getBoundingClientRect`:
46
47```javascript
48range = document.getSelection().getRangeAt( 0 );
49
50// Before
51rects = range.getClientRects();
52boundingRect = range.getBoundingClientRect();
53
54// After
55rects = RangeFix.getClientRects( range );
56boundingRect = RangeFix.getBoundingClientRect( range );
57```
58
59Demo
60====
61http://edg2s.github.io/rangefix/
62