Bug 194395 – Fix animation rendering on the webkit.org homepage

• Component: WebKit Website
• Status: RESOLVED FIXED

[Jon Davis]

When the slow animation on the webkit.org homepage completes, the position of the compass element often jumps and becomes incorrectly positioned.

[Jon Davis]

Created attachment 361402 [details]
Patch

[Nikita Vasilyev]

Comment on attachment 361402 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=361402&action=review

Could you attach a screenshot of the bug?

> Websites/webkit.org/wp-content/themes/webkit/front-header.php:-103
> -    @-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);
> -        }
> -    }
> -

Nice that we don't need to use -webkit- prefix here anymore.

[Nikita Vasilyev]

Do you know why it was jumping? Was it related to font-size changes (I see you previously used rem units)?

[Nikita Vasilyev]

Comment on attachment 361402 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=361402&action=review

> Websites/webkit.org/wp-content/themes/webkit/front-header.php:51
> +        transform: translateY(-450px);

What's the reasoning behind this change? Is it just gardening? E.g. using pixels for consistency.

> Websites/webkit.org/wp-content/themes/webkit/front-header.php:81
> +        transform: translateY(-400px);

Discussed offline. This line fixes the issue, the rest is a cleanup.

I'd r+.

[Nikita Vasilyev]

(In reply to Nikita Vasilyev from comment #4)
> Comment on attachment 361402 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=361402&action=review
> 
> > Websites/webkit.org/wp-content/themes/webkit/front-header.php:51
> > +        transform: translateY(-450px);
> 
> What's the reasoning behind this change? Is it just gardening? E.g. using
> pixels for consistency.

Ignore my question. We've discussed this — pixels are used for consistency.

[Devin Rousso]

Comment on attachment 361402 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=361402&action=review

rs=me

> Websites/webkit.org/wp-content/themes/webkit/front-header.php:76
> +        animation-name: bgspin;

If you can reproduce the bug we discussed offline about this (e.g. a reduction), please file a bug for it :)

[WebKit Commit Bot]

Comment on attachment 361402 [details]
Patch

Clearing flags on attachment: 361402

Committed r241178: <https://trac.webkit.org/changeset/241178>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/47903889>