unblur

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:

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:

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,
})