Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert to their original size and weight. Strangely, this anomaly solely affects the links positioned to the right in the code below.
Below is an illustration showcasing the problem:
In the image provided, notice how the links to the right of 'game history' are smaller compared to those on the left side of 'game history' (which happens to be the link under the hover effect in the image). The discrepancy is more noticeable during the occurrence than portrayed in the visual representation.
Here's the corresponding code snippet:
<ul class="nav_links_list">
<li>
<div><a class="head_link-nukun head_link--nukun" href="index.php"><span>H</span>ome</a></div>
</li>
...
// Remaining HTML code continuation included from source
Further detailing the CSS implementation:
/* Custom Nukun link styles for the header */
.head_link-nukun {
outline: none;
text-decoration: none;
position: relative;
font-size: 10pt;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
...
// CSS styling declarations followed through until completion from source
<head_link--nukun:hover span{
color: #EEEEEE;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
transform: perspective(1000px) rotate3d(0,1,0,180deg);
}`
The issue is non-existent in Firefox as the links retain their appearance even when hovered upon. This abnormality is unique to Safari. Seeking assistance in resolving this matter promptly!