After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint shadow showing.
Curiously, when I use the browser responsive mode to check the website, everything appears normal. However, upon opening it on an iPhone, the display issue arises. While the button remains clickable, its visibility is severely compromised.
You can visit the website at: www.unifiedtechno.com
https://i.sstatic.net/t6WQr.jpg
Landing.js
import React from 'react';
import logo from './logo.png';
import {Link} from 'react-router-dom';
import './Landing.css';
function Landing()
{
return (
<>
<div id="logo">
<img src={logo} alt="logo"/>
</div>
<div >
<Link id="begin" to ="/Home"><button id="button">Begin</button></Link>
</div>
</>
);
}
export default Landing;
Landind.css
@keyframes transitionHome {
from{opacity: 0;}
to{opacity:1};
}
#logo{
width:100vw;
display:flex;
justify-content: center;
margin-top:20vh;
animation-name: transitionHome;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
#logo img{
width:30vh;
height:30vh;
transform: scale(0.5);
animation-name:spinScale;
animation-duration: 1s;
animation-fill-mode: backwards;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
#begin {
width:100vw;
display:flex;
flex-direction:row;
justify-content: center;
margin-top:10vh;
animation-name: transitionHome;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
#begin #button{
color:rgb(0, 82, 85);
position:absolute;
background-color: #3db5b5da !important;
font-size: 2.5vh;
font-weight: 400;
padding:1vh;
width:15vh;
border-radius: 25px;
border:none;
font-family: 'Poppins', sans-serif;
text-align: center;
box-shadow: 3px 3px 3px 5px rgba(0, 0, 0, 0.082);
animation-name: transitionHome;
animation-duration: 1.5s;
animation-fill-mode: forwards;
-webkit-appearance: none;
}
#begin #button:hover{
cursor:pointer;
background-color: rgba(25, 167, 155);
color:rgb(255, 255, 255);
animation-name: transitionHome;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes spinScale {
from{
transform: scale(0.8) rotate(0deg);
}
to{
transform: scale(1) rotate(360deg);
}
}