Suggestion for smoother scaling of logo in sticky header

[skafte]

Hi Andrii (and everyone else),

Hope you are well.

Just discovered a solution to the scaling of the sticky header logo that I thought would be worth sharing here in case you’d want to implement it in the theme OR in case someone else in the forum should be interested.

The scaling of the logo in the sticky header hasn’t been great in Safari (although fine in Firefox and in Chrome). Here’s an example: https://goo.gl/C9639B – you’ll notice that the image kind of blinks and reloads when minimised.

I had added this additional CSS to make it work as I wanted it to:

#logo img {
width: 300px;
height: auto;
max-width: 90% !important;
}

.fixed-header #logo img {
max-height: inherit !important;
width: 150px;
height: auto;
max-width: inherit !important;
}

However, with the properties of CSS3 3D Transform the ‘animation’ becomes more smooth, also in Safari. Here’s an example: https://goo.gl/qCqsWH

I achieved this by changing the CSS as follows:

#logo img {
width: 300px;
height: auto;
max-width: 90% !important;
}

.fixed-header #logo img {
max-height: inherit !important;
-webkit-transform: scale(.5) scale3d(1, 1, 1);
-moz-transform: scale(.5) scale3d(1, 1, 1);
-o-transform: scale(.5) scale3d(1, 1, 1);
-ms-transform: scale(.5) scale3d(1, 1, 1);
transform: scale(.5) scale3d(1, 1, 1);
}

Now I’m not yet sure if this is a bullet proof solution, but so far it’s working great for me! I’ll let you know if I experience any issues.

Thanks,

Jonas

[skafte]

Oh, forgot that this feature doesn’t actually exist anymore in the theme! (which I think is a good idea by the way!) – my client just really wanted it back, and so I added it manually. Anyway, I hope this scaling method might be useful to other layout types such as the left-aligned menu, which I believe still resizes on scroll(?)… :-)

[satoristudio]

Thanks for posting this, Jonas! That does look nice :)

Best,
Andrii / Satori Studio

[Author]

Posts