cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix blurry modal dialog on chrome/safari (#101) 

Fixes #71
This commit is contained in:
Nolan Lawson 2018-04-13 09:46:47 -07:00 committed by GitHub
parent a208e5dedb
commit fdcf2bc46b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
routes/_components/dialog/components/ModalDialog.html
View File

@ -28,9 +28,21 @@
:global(.modal-dialog[aria-hidden='true']) { :global(.modal-dialog[aria-hidden='true']) {
display: none; display: none;
} }
.modal-dialog-backdrop { :global(.modal-dialog) {
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.modal-dialog-backdrop {
position: fixed;
z-index: 10010;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -41,12 +53,7 @@
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
.modal-dialog-contents { .modal-dialog-contents {
z-index: 10010; z-index: 10020;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: antialiased; /* fix for transform:translate causing blurry text in Chrome/Safari */
padding: 0; padding: 0;
border: 1px solid var(--main-border); border: 1px solid var(--main-border);
border-radius: 2px; border-radius: 2px;