Index: ui/webui/resources/css/overlay.css |
diff --git a/ui/webui/resources/css/overlay.css b/ui/webui/resources/css/overlay.css |
index 3b3340d26de7cf333f8ee5d2abfc47b62ea5d8d6..99457ebdc8aef0745784d7343624a5d82934c0e3 100644 |
--- a/ui/webui/resources/css/overlay.css |
+++ b/ui/webui/resources/css/overlay.css |
@@ -7,18 +7,18 @@ |
-webkit-box-align: center; |
-webkit-box-orient: vertical; |
-webkit-box-pack: center; |
- /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ |
- -webkit-perspective: 1px; |
- -webkit-transition: 200ms opacity; |
background-color: rgba(255, 255, 255, 0.75); |
bottom: 0; |
display: -webkit-box; |
left: 0; |
overflow: auto; |
padding: 20px; |
+ /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ |
Eric Willigers
2016/11/30 04:04:56
BTW, we now have "will-change: transform;" - see h
Dan Beam
2016/12/01 00:22:42
Acknowledged.
|
+ perspective: 1px; |
position: fixed; |
right: 0; |
top: 0; |
+ transition: 200ms opacity; |
} |
/* Used to slide in the overlay. */ |
@@ -32,7 +32,6 @@ |
.overlay .page { |
-webkit-border-radius: 3px; |
-webkit-box-orient: vertical; |
- -webkit-transition: 200ms transform; |
background: white; |
box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); |
color: #333; |
@@ -40,17 +39,18 @@ |
min-width: 400px; |
padding: 0; |
position: relative; |
+ transition: 200ms transform; |
z-index: 0; |
} |
/* If the options page is loading don't do the transition. */ |
.loading .overlay, |
.loading .overlay .page { |
- -webkit-transition-duration: 0ms !important; |
+ transition-duration: 0ms !important; |
} |
/* keyframes used to pulse the overlay */ |
-@-webkit-keyframes pulse { |
+@keyframes pulse { |
0% { |
transform: scale(1); |
} |
@@ -66,10 +66,10 @@ |
} |
.overlay .page.pulse { |
- -webkit-animation-duration: 180ms; |
- -webkit-animation-iteration-count: 1; |
- -webkit-animation-name: pulse; |
- -webkit-animation-timing-function: ease-in-out; |
+ animation-duration: 180ms; |
+ animation-iteration-count: 1; |
+ animation-name: pulse; |
+ animation-timing-function: ease-in-out; |
} |
.overlay .page > .close-button { |