Modified: trunk/Websites/webkit.org/ChangeLog (241177 => 241178)
--- trunk/Websites/webkit.org/ChangeLog 2019-02-08 01:15:07 UTC (rev 241177)
+++ trunk/Websites/webkit.org/ChangeLog 2019-02-08 01:21:34 UTC (rev 241178)
@@ -1,5 +1,14 @@
2019-02-07 Jon Davis <[email protected]>
+ Fixed animation positioning when homepage animation completes
+ https://bugs.webkit.org/show_bug.cgi?id=194395
+
+ Reviewed by Devin Rousso.
+
+ * wp-content/themes/webkit/front-header.php:
+
+2019-02-07 Jon Davis <[email protected]>
+
Disable the WP emoji polyfill
https://bugs.webkit.org/show_bug.cgi?id=194394
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/front-header.php (241177 => 241178)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/front-header.php 2019-02-08 01:15:07 UTC (rev 241177)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/front-header.php 2019-02-08 01:21:34 UTC (rev 241178)
@@ -46,9 +46,9 @@
position: absolute;
width: 100%;
height: 1261px;
- background-image: radial-gradient(ellipse closest-corner at center center,hsl(198, 100%, 20%) 0%,hsla(204, 100%, 20%,0) 100%);
+ background-image: radial-gradient(ellipse closest-corner at center center, hsl(198, 100%, 20%) 0%, hsla(204, 100%, 20%, 0) 100%);
z-index: 4;
- transform: translateY(-45rem);
+ transform: translateY(-450px);
}
#template {
@@ -61,7 +61,8 @@
background-position: 50% 49.5%;
background-size: 101.5%;
z-index: 3;
- transform: translateY(-40rem); }
+ transform: translateY(-400px);
+ }
#compass {
position: absolute;
@@ -72,10 +73,12 @@
background-position: 50% 50%;
background-size: 98%;
opacity: 0.3;
- -webkit-animation: bgspin 360s ease-out;
- animation: bgspin 360s ease-out;
+ animation-name: bgspin;
+ animation-duration: 360s;
+ animation-timing-function: ease-out;
z-index: 2;
will-change: transform;
+ transform: translateY(-400px);
}
@keyframes bgspin {
@@ -89,18 +92,6 @@
}
}
- @-webkit-keyframes bgspin {
- from {
- transform: translateY(-400px) rotate(0);
- -webkit-transform: translateY(-400px) rotate(0deg);
- }
-
- to {
- transform: translateY(-400px) rotate(360);
- -webkit-transform: translateY(-400px) rotate(360deg);
- }
- }
-
.hero .content {
position: relative;
max-width: 800px;
@@ -148,10 +139,8 @@
@media (prefers-reduced-motion) {
#compass {
animation: none;
- transform: translateY(-400px);
}
}
-
</style>
<?php if ( is_front_page() && have_posts()): the_post(); ?>
