component blurry until focused

[XeniaSiskaki]

Hi,

first of all thank you for this great component. The only problem I have, is that whenever the component is rendered, it's always blurry until it gains focus. After that it's always fine until it's closed and rendered again. I'm providing some snapshots. Any idea why this might be happening?

Without focus

With focus

[qimingweng]

Hmm, I've noticed this sometimes too. cc @moberemk does this feel familiar at all?

@XeniaSiskaki am I correct in assuming you are using Chrome on a Windows machine? Is there some sample code you can share to reproduce this consistently?

[XeniaSiskaki]

@qimingweng I'm actually using Chrome on Linux. I've tried the component with just a simple textarea inside and the same thing happens. So the react component would render the following:

render() {
      const {onClose, visible} = this.props;

      return (
          <div>
              {
                  visible &&
                  <ModalContainer onClose={onClose}>
                      <ModalDialog onClose={onClose}>
                          <textarea placeholder='Comment' ref='comment' value='fqwefewrgewq'/>
                      </ModalDialog>
                  </ModalContainer>
              }
          </div>
      );
}

Not sure if that's enough for reproducibility

[qimingweng]

Hi @XeniaSiskaki I don't have a lot of time to look into this right now. I think this has something to do with my use of the css transform property and the animation library. Can you check the inspector to see if there is a transform that involves a scale where the scale is not equal to 1?

[XeniaSiskaki]

Hi @qimingweng,

Sorry for the late response. The only transform I can see is the following:

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

[qimingweng]

This probably has something to do with the dynamics.js dependency

It looks like it might not be taking off that property when the animation is finished.

[XeniaSiskaki]

So, is there any possible solution?

[qimingweng]

I would open a pull request on dynamics.js or look into changing the animation library here or removing the animation overall

I don't currently have time to address this on this package

[Xecutor]

The issue is still present. It looks ok in IE, in FF there is a blur, but it disappears on its own. But in Chrome it's still blurred until some forced redraw (for example mouse over the close button). An attempt to inspect element removes blur. Can we have an option to turn off scale animation?