I found a fix to the problem!
Since that code essentially triggers a bootstrap modal, I did everything they said
from the documentation that said to include type=”button”. This however is clashing with my css since i do not provided any class of buttons and hence safari just added its default button css.

I didn’t see this through as i’m using Chrome as my primary development tool. But safari for mac also displays the same thing.

Removing type="button" fixed my issue.

Pretty straightforward question. Below are the images for reference.

here is the iOS safari from my phone.

And here is my browser, note that both is taken from the live server itself.

Below is the HTML and CSS code.

HTML

<div class="about-more-wrapper">
    <a type="button" data-toggle="modal" data-target="#inProgressModal">
        More
    </a>
</div>

CSS

.about-more-wrapper a {
    cursor: pointer;
    color: #666666;
    display: block;
    height: 100%;
    min-height: 40px;
    margin-top: 0;
    padding-left: 1.625rem;
}

.about-more-wrapper a:hover {
    color: #101010;
    text-decoration: none;
}

.about-more-wrapper a::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 5%;
    background-color: #666666;
    height: 20%;
    width: 1px;
}

.about-more-wrapper a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0%;
    left: 5%;
    background-color: #101010;
    height: 0%;
    width: 1px;
}

As you can see, there is no code displaying of the colour of which is present on the iOS.
Any help is much appreciated. Cheers!