'Cursor: pointer' is not accurate after transformation

Question

I'm currently trying to create a webpage which has an arrow at the base of a section, clicking on it will result in the screen scrolling to another section. I have just tried to make this user friendly by changing the cursor to a pointer when you are over the clickable icon. The problem is that the cursor will change to a pointer, however it is not over the top of the icon and instead slightly away from it. When the mouse is over the icon there is no pointer.

Here are some snippets of relevant code in HTML and CSS:

HTML:

<div class="LPNavBox">
    <p>Look at this stuff</p>
    <div class="LPDownArrow">
        <i class="fas fa-chevron-down fa-2x"></i>
    </div>
</div>

CSS:

.LPNavBox{
    position: absolute;
    left:50%;
    top:95%;
    transform: translate(-50%, -50%);
    background-color: #ff253a;
}

.LPNavBox p{
    font-family: 'Spartan', sans-serif;
    font-size: 0.75vw;
    letter-spacing: 0.05vw;

    opacity: 60%;
    color: whitesmoke;
}

.LPDownArrow {
    width:45px;
    height:20px;
    padding-top: 2vh;
    padding-bottom: 1vh;
    transform: translateX(12.5vh);

    cursor: pointer;

    background-color: mediumpurple;
}

.fa-chevron-down{
    position: absolute;
    top:0;
    left:20%;
    opacity: 70%;
    transform: scale(1.15,1);

    color: whitesmoke;
}

I have attached an image below showing the two div boxes areas, the drawn blue box shows roughly where the cursor changes to a pointer.

If anyone could shine some light on this it would be much appreciated, thank you.

Edit ---

It does seem that transform: translate() messes with the boundaries for the pointer to change, is there a way to reposition something without this being mess up?

rileyjsumner rileyjsumner · Accepted Answer · 2020-03-06T15:56:53

transform: translateX(12.5vh) is messing with where the box is... I switched it to margin: 0 auto; and it is centered.

Codepen

'Cursor: pointer' is not accurate after transformation

1 Answers