Name | Date | Size | #Lines | LOC | ||
---|---|---|---|---|---|---|
.. | 03-May-2022 | - | ||||
README.md | H A D | 30-Sep-2021 | 1.6 KiB | 62 | 43 |
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