I have a weird transition rendering issue when a page loads. The header elements are zooming in rather than fading in. I’ve included a link to a video of it as I can only reproduce the issue using Safari and weirdly Microsoft Edge for macOS. it works as intended in Firefox, Chrome, and Opera (all macOS versions I don’t have access to a windows environment at the moment.). Does anyone have any idea why this is happening? I could keep the header `display: none;
[https://www.youtube.com/watch?v=M3J0ojNe9Ok
Link to code at codepen.
[https://codepen.io/k1n64r7hur/pen/MWvaGrP
P.S. Strange aside. the issue does not happen when rendering the page in safari at codepen.io. could this issue be due to me loading a local file?