У меня проблема с некоторыми элементами css, которые ломаются в браузерах iphone (safari и chrome), когда они полностью работают на настольных компьютерах и устройствах android.
Я прикрепил 2 изображения экранов входа в систему в качестве одного из примеров, код для этого экрана следующий:
@font-face {
font-family: 'Gidole Regular';
font-style: normal;
font-weight: normal;
src: local('Gidole Regular'), url('../fonts/Gidole-Regular.woff') format('woff');
}
body {
max-width: 1920px;
max-height: 1920px;
background: #eee;
}
.Title {
margin-left: 20px;
margin-right: 20px;
font-family: industry-inc-3d, sans-serif;
height: 128px;
font-weight: normal;
font-size: 45px;
line-height: 60px;
text-align: center;
color: #f05d5b;
}
.flashed-messages
{
font-family: industry-inc-3d, sans-serif;
height: 24px;
font-weight: normal;
font-size: 15px;
text-align: center;
color: #f05d5b;
/* border: 1.5px solid #f05d5b;
box-shadow: 4px 4px 0px #f05d5b;
margin-top: 10px; */
}
.form {
margin: 0 auto;
display: table;
}
.email-box {
width: 300px;
height: 50px;
background: #f6f7f7;
border: 1.5px solid #f05d5b;
box-shadow: 4px 4px 0px #f05d5b;
position: relative;
}
.email {
width: 299px;
height: 24px;
font-family: industry-inc-base, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 26px;
text-align: left;
color: #707070;
}
.password-box {
width: 300px;
height: 50px;
background: #f6f7f7;
border: 1.5px solid #f05d5b;
box-shadow: 4px 4px 0px #f05d5b;
position: center;
}
.password {
width: 299px;
height: 24px;
font-family: industry-inc-base, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 26px;
text-align: left;
color: #707070;
}
.button-signin {
margin: 0 auto;
width: 143px;
height: 27px;
font-family: industry-inc-3d, sans-serif;
font-weight: normal;
font-size: 21px;
text-align: center;
color: #f05d5b;
width: 150px;
height: 50px;
background: #f6f7f7;
border: 1.5px solid #f05d5b;
box-shadow: 4px 4px 0px #f05d5b;
}
.button {
text-align: center;
}
.signup-text{
font-family: "Gidole Regular";
width: 218px;
height: 18px;
font-weight: normal;
font-size: 16px;
line-height: 26px;
color: #707070;
opacity: 0.5;
text-align: center;
position: relative;
}
.signup-link{
font-family: "Gidole Regular";
width: 218px;
height: 18px;
font-weight: normal;
font-size: 16px;
line-height: 26px;
color: #707070;
opacity: 0.5;
text-align: center;
position: relative;
}
.signup {
margin-top: 30px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sign in</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/sign_in.css') }}">
<link rel="stylesheet" href="../static/css/sign_in.css">
<!-- <link rel="stylesheet" type="text/css" href="precious.css"> -->
<link rel="stylesheet" href="https://use.typekit.net/oaq5uou.css">
<style>
@import url("https://use.typekit.net/oaq5uou.css");
</style>
</head>
<body>
<h1 class="Title">Welcome To Precious</h1>
<div class="flashed-messages">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endif %}
{% endwith %}
</div>
<div class="form">
<form class="form-signin" method="POST">
<div>
<div><label class="email" for="email">Email</label></div>
<div><input class="email-box" type="email" name="email"></div>
</div>
<br>
<div>
<div><label class="password" for="password">Password</label></div>
<div><input class="password-box" type="password" name="password"></div>
</div>
<br>
<div class="button">
<input type="submit" name="submit" value="Sign In" class="button-signin" >
</div>
</form>
<div class="signup">
<a class="signup-text">No account? </a>
<a href="/sign_up" class="signup-link">sign up</a>
</div>
</div>
</body>
</html>
Dektop или браузер adroid
Iphone браузер
У кого-нибудь есть идея, почему это могло происходить?