Blurry text at certain browser window zoom levels

Description

The Tether module (used by the datepicker to position its popup calendar) uses CSS transforms to trigger GPU optimizations. Using these CSS transforms would result in blurry texts in certain zoom levels. (See Optimization section @ http://tether.io)

Here’s a pair of screenshots showing the difference (viewing https://hacker0x01.github.io/react-datepicker/ on [13" MBP, macOS Sierra - Chrome version 58 (Window @ 67% Zoom Level)]:

Proposed Solution

Thankfully, the guys at Hubspot implemented a prop for us to disable this.

<TetherComponent
  classPrefix={'react-datepicker__tether'}
  attachment={this.props.popoverAttachment}
  targetAttachment={this.props.popoverTargetAttachment}
  targetOffset={this.props.popoverTargetOffset}
  renderElementTo={this.props.renderCalendarTo}
  constraints={this.props.tetherConstraints}

  // *** exposing Tether's `optimizations` prop to the datepicker ***
  optimizations={this.props.tetherOptimizations}
>
  ...
</TetherComponent>

Disabling GPU optimization:

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
  tetherOptimizations={{ gpu: false }}/>

I’ve made a fix on my end, would love to create a pull request for it! Really liked this library, would be great to get this patched on NPM asap so that we can use it for production =)

[martijnrusschen]

Yeah would love to see a PR 👍

[FezVrasta]

Popper.js roundes the offset values to avoid half pixels and prevent text blurring