{"action":"created","issue":{"url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/238","repository_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog","labels_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/238/labels{/name}","comments_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/238/comments","events_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/238/events","html_url":"https://github.com/yapplabs/ember-modal-dialog/issues/238","id":287220256,"node_id":"MDU6SXNzdWUyODcyMjAyNTY=","number":238,"title":"`transform: translate(-50%, -50%);` causing Text Blur","user":{"login":"mhluska","id":997350,"node_id":"MDQ6VXNlcjk5NzM1MA==","avatar_url":"https://avatars1.githubusercontent.com/u/997350?v=4","gravatar_id":"","url":"https://api.github.com/users/mhluska","html_url":"https://github.com/mhluska","followers_url":"https://api.github.com/users/mhluska/followers","following_url":"https://api.github.com/users/mhluska/following{/other_user}","gists_url":"https://api.github.com/users/mhluska/gists{/gist_id}","starred_url":"https://api.github.com/users/mhluska/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhluska/subscriptions","organizations_url":"https://api.github.com/users/mhluska/orgs","repos_url":"https://api.github.com/users/mhluska/repos","events_url":"https://api.github.com/users/mhluska/events{/privacy}","received_events_url":"https://api.github.com/users/mhluska/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-01-09T20:28:30Z","updated_at":"2018-07-24T03:44:16Z","closed_at":null,"author_association":"NONE","body":"The modal is positioned using `transform: translate(-50%, -50%);` but it causes elements in the modal to be blurred:\r\n\r\nElement in modal with transform:\r\n\r\n![screenshot 2018-01-09 12 28 06](https://user-images.githubusercontent.com/997350/34741752-9194f61c-f538-11e7-9349-a51657651bd3.png)\r\n\r\nElement in modal without transform:\r\n\r\n![screenshot 2018-01-09 12 28 23](https://user-images.githubusercontent.com/997350/34741763-987628c0-f538-11e7-8ab0-6b6f81580a4a.png)\r\n\r\nI'm on latest Chrome (Version 63.0.3239.132 (Official Build) (64-bit))\r\n\r\nAs a workaround, I modify the styles of `ember-modal-overlay` to use flex positioning instead:\r\n\r\n```\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: center;\r\n```\r\n  "},"comment":{"url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/comments/407271469","html_url":"https://github.com/yapplabs/ember-modal-dialog/issues/238#issuecomment-407271469","issue_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/238","id":407271469,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzI3MTQ2OQ==","user":{"login":"sachintha88","id":20631195,"node_id":"MDQ6VXNlcjIwNjMxMTk1","avatar_url":"https://avatars3.githubusercontent.com/u/20631195?v=4","gravatar_id":"","url":"https://api.github.com/users/sachintha88","html_url":"https://github.com/sachintha88","followers_url":"https://api.github.com/users/sachintha88/followers","following_url":"https://api.github.com/users/sachintha88/following{/other_user}","gists_url":"https://api.github.com/users/sachintha88/gists{/gist_id}","starred_url":"https://api.github.com/users/sachintha88/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sachintha88/subscriptions","organizations_url":"https://api.github.com/users/sachintha88/orgs","repos_url":"https://api.github.com/users/sachintha88/repos","events_url":"https://api.github.com/users/sachintha88/events{/privacy}","received_events_url":"https://api.github.com/users/sachintha88/received_events","type":"User","site_admin":false},"created_at":"2018-07-24T03:44:16Z","updated_at":"2018-07-24T03:44:16Z","author_association":"NONE","body":"I hope this is about centering the object into exact center of the screen.\r\nBlurring happens with the \r\n\r\n`transform: translate(-50%,-50%);`\r\n\r\nso instead doing \r\n\r\n```\r\nposition: absolute;\r\nmargin:0;\r\ntop: 50%;\r\nleft: 50%;\r\ntransform: translate(-50%,-50%);\r\n```\r\n\r\nI tried injecting style in to element using javascript. (React.js)\r\n\r\n\r\n```\r\nconst node = ReactDOM.findDOMNode(this);\r\nvar width = node.offsetWidth;\r\nvar height = node.offsetHeight;\r\nvar windowWidth = window.innerWidth;\r\nvar windowHeight = window.innerHeight;\r\n\r\nstyle={\r\n    left : (windowWidth/2) - (this.state.width/2) + 'px',\r\n    right:  (windowWidth/2) - (this.state.width/2) + 'px',\r\n    top: (windowHeight/2) - (this.state.height/2) + 'px',\r\n    bottom: (windowHeight/2) - (this.state.height/2) + 'px'\r\n}\r\n```\r\n\r\ninject style into element by javascript style\r\n\r\nEg.\r\n\r\n```\r\nexport default class Dialog extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            width: '0px',\r\n            height: '0px'\r\n        };\r\n    }\r\n\r\n    setWidthhandHeight(node){\r\n        if (this.state.width !== node.offsetWidth) {\r\n            this.setState({\r\n                width: node.offsetWidth,\r\n                height: node.offsetHeight\r\n            });\r\n        }\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.setWidthhandHeight(node);\r\n    }\r\n\r\n    render() {\r\n        const windowWidth = window.innerWidth;\r\n        const windowHeight = window.innerHeight;\r\n        return (\r\n            <dialog className={this.props.className + \" dialog\"}\r\n                    style={{\r\n                        left : (windowWidth/2) - (this.state.width/2) + 'px',\r\n                        right:  (windowWidth/2) - (this.state.width/2) + 'px',\r\n                        top: (windowHeight/2) - (this.state.height/2) + 'px',\r\n                        bottom: (windowHeight/2) - (this.state.height/2) + 'px'\r\n                    }}>\r\n                {this.props.title ? (\r\n                    <header><span>{this.props.title}</span></header>\r\n                    )\r\n                    : null\r\n                }\r\n                {this.props.children}\r\n            </dialog>\r\n        );\r\n    }\r\n}\r\n\r\n```"}}
{"actor":{"display_login":"sachintha88"}}