React-datepicker: Blurry text at certain browser window zoom levels

[tohjustin]

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 =)

[alex-shamshurin]

So is this a problem? may be a bit blurry is better than lack of GPU optimizations? With this optimization tethered component won't be repainted on scrolling.

[tohjustin]

Hmm true, this might not be a huge problem for everyone. =S

By exposing more props for the user to control, we can allow them to fine tune the component to their specific use case (might be the reason by this optimization can be disabled in the first place).

Just to clarify, the fix would provide an option for the user to disable the the tether component's optimization (eg. gpu), everything else would stay the same & be unaffected.

[grkacy]

This blur is annoying and is becoming a stopper for using this component in our system. +1

[rafeememon]

I'm very uneasy about adding a prop that is directly tied to the internal implementation of the component -- aside from increasing the API footprint, it hinders our ability to change the internals in the future. Relatedly, tether's project status is up in the air, and they are encouraging people to use popper.js instead, which may be worth exploring.

[tohjustin]

@rafeememon I do understand your concerns, isn't tetherConstraints something similar that's already implemented?

I'd love to help migrate over to popper.js if it also fixes the blurry text issue... =0

[rafeememon]

@tohjustin, yep it is =) But I don't think that's a reason to make the hole any deeper.

[tohjustin]

@rafeememon @alex-shamshurin I guess this fix isn't going through? =S

On a side note, any plans to migrate over popper.js? I can start working on it this weekend =)

[martijnrusschen]

If popper is proposed by tether itself, I'd be supportive in moving to
that.
On Thu, 22 Jun 2017 at 18:59, Justin Toh [e-mail] wrote:

@rafeememon https://github.com/rafeememon @alex-shamshurin
https://github.com/alex-shamshurin I guess this fix isn't going
through? =S

On a side note, any plans to migrate over popper.js
https://popper.js.org/? I can start working on it this weekend =)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/899#issuecomment-310440570,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABWNKKlKjLKq5Dtzo091i6zpiIY4_DX9ks5sGp1YgaJpZM4OAeym
.

[tohjustin]

@martijnrusschen Is this a green light for me to start working on it? =0

[martijnrusschen]

Yeah would love to see a PR 👍

[tohjustin]

Okay, will create an issue & start working on it this weekend =)

[rafeememon]

@tohjustin, I think it's worth keeping this open to track the blurriness issue; the switch may or may not solve it

[tohjustin]

@rafeememon Thanks for the heads up! =)

I'm aware that this might not fix the issue but will still be glad to help out you guys to migrate over to Popper.js

[FezVrasta]

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

[martijnrusschen]

I released the new popper implementation, this should be resolved. Let me know if this still happens.

[tohjustin]

@martijnrusschen Thanks for the heads up 👍 will let you know if the blurry text is still there!