Button transition bug fixing? I need your help team…

[lydenyardley]

Hey everyone,

This one is puzzling! I’m testing a button transition and it’s doing different things across Chrome, Firefox, and Safari.

Chrome = correct, intended animation. ::before element starts from a 45deg skew and no width, and on button hover, transforms to 0deg skew and full width (-3px margin). SMOOTH :)
Safari = correct animation, but also producing a weird text jumping bug
Firefox = correct animation, but producing a weird height jump (the ::after element is about 1px too tall during transition, only to resolve itself at the end of the transition)

Is anybody familiar with these matters, up for the challenge?

Website is https://yardley.me

Thanks,
Lyden

[Paulie_D]

A Codepen.io demo would be preferable to a separate link.

Saves us having to tinker with unrelated code in Developer Tools.

[lydenyardley]

You got it @Paulie_D – https://codepen.io/lydenyardley/pen/QoXyVB?editors=1100

[Shikkediel]

Looks perfectly fine to me on Firefox (W7).

[lydenyardley]

Oh… well that’s good to know. I’m on a Mac, so haven’t been able to test that.

Anybody else see the issues I’ve described?

[lydenyardley]

Anybody got a few minutes to look at this for me? I’ll owe you one!

[lydenyardley]

I’d still love some support on this. I think it might be something simple that I’ve missed…

[Author]

Posts