React-modal: getting blurry text in chrome browser

[jasan-s]

Summary:

In the latest chrome browser the content text in modal is blurry. it is fine in firefox.

Steps to reproduce:

import React, { PropTypes } from 'react'
import {default as ReactModal} from 'react-modal'
import {Field, reduxForm} from 'redux-form'
import {TextField} from 'material-ui'
import { darkBtn } from 'sharedStyles/styles.css'
// import { Modalclass, overlay } from './styles.css'
// modalForm.propTypes = {
//   duckText: PropTypes.string.isRequired,
//   isOpen: PropTypes.bool.isRequired,
//   // user: PropTypes.object.isRequired,
//   openModal: PropTypes.func.isRequired,
//   closeModal: PropTypes.func.isRequired,
//   updateDuckText: PropTypes.func.isRequired
// }

const customStyles = {

    overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
}
const modalForm = (props) => {
  // console.log(props)
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <div >
      <span className = {darkBtn} onClick= {props.openModal}> New Duck</span>
      <ReactModal
      isOpen={props.isOpen}
      style = {customStyles}
      onRequestClose={props.closeModal}>
<div>
  <h1>Compose New Duck</h1>
  <form onSubmit= {handleSubmit}>
    <Field name ='duck' component = {(duck) =>
      <TextField hintText = 'Enter Duck'
        floatingLabelText = 'Enter Duck here'
        {...duck} />} />

  </form>
  <button onClick= {props.closeModal}>Close Modal...</button>
  </div>
</ReactModal>
    </div>
  )
}

export default reduxForm({
  form: 'duckModal'  // a unique identifier for this form
})(modalForm)

1.
2.
3.

Expected behavior:

clear sharp text

Additional notes:

If I change the following line:
transform: 'translate(-50%, -50%)'
to
transform: 'translate3d(-50%, -50%)'

the text in modal is clear in the chrome browser but the modal is no longer centered

[psimyn]

There is a current bug in Chrome, and fix has been started.

translate3d takes 3 arguments - setting to translate3d(-50%, -50%, 0) I think will have the same effect

[claydiffrient]

Sorry for the delay in getting to this. I hope that you've been able to find a working solution. I'm going to close this for now though as it seems the issue was with Chrome, rather than with the modal itself.

[max-favilli]

Since the chrome bug is still there after years I think react-modal should address it.
Until then: transform: translate(-50.1%, -50.1%);

[arianitu]

@max-favilli that sort of works, text is still slightly blurry, but better than nothing. Is there any other more solid solutions?

[olaj]

FYI for anyone reading. For me it helped to set the border-radius to 0 on the "content" style.

[michaelrivet]

I know this is an old issue, but I'm still running into it today. I believe I've found a less hack-y solution that doesn't rely on translate. Even using the suggestions (-50.1%, calc(-50% - .5px), etc) I've still seen bluryness.

Instead, I updated the overlay to have

    display: flex;
    align-items: center;
    justify-content: center;

And then removed the following from the modal iteself

position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

I'm going to do more testing, but it seems to be rendering better in chrome than the previous approach using translate.