https://github.com/inker/unblur

A tool to fix blurry text on Webkit-based browsers
https://github.com/inker/unblur

blur blurriness blurry chrome font jaggy text unblur webkit

Last synced: 22 days ago
JSON representation

A tool to fix blurry text on Webkit-based browsers

• Host: GitHub
• URL: https://github.com/inker/unblur
• Owner: inker
• Created: 2017-02-18T13:30:08.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-17T22:13:59.000Z (almost 7 years ago)
• Last Synced: 2024-12-14T02:19:10.244Z (about 2 months ago)
• Topics: blur, blurriness, blurry, chrome, font, jaggy, text, unblur, webkit
• Language: TypeScript
• Size: 27.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# unblur

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]

A tool to fix blurry text on WebKit-based browsers. With a given interval, dirty-checks for any elements with on them `translate3d` and replaces it with `translate`.

## Installation

```

npm install --save unblur

```

## Usage

Basic usage:

```javascript

import unblur from 'unblur'

// add this code somewhere around the entry point of your application

// this function can only be called once

unblur()

```

One may also use optional parameters:

```javascript

unblur({

  // the root element which children to unblur (default is document.body)

  element: document.getElementById('foobar'),

  // the interval in ms at which to invoke the unblur function (default is 1000)

  interval: 5000,

  // skip the invocation if the predicate evaluates to true (default is undefined)

  skipIf: () => document.querySelectorAll('[style*="transition"').length > 0,

  // enable for all browsers rather than just desktop Webkit (default is false)

  allBrowsers: true,

  // on unblur

  onUnblur: true,

  // if blurring is skipped

  onSkip: true,

})

```

[npm-url]: https://npmjs.org/package/unblur

[downloads-image]: http://img.shields.io/npm/dm/unblur.svg

[npm-image]: http://img.shields.io/npm/v/unblur.svg

[david-dm-url]:https://david-dm.org/inker/unblur

[david-dm-image]:https://david-dm.org/inker/unblur.svg

[david-dm-dev-url]:https://david-dm.org/inker/unblur#info=devDependencies

[david-dm-dev-image]:https://david-dm.org/inker/unblur/dev-status.svg