My website does not work on iphone or mac - php

Question

What happens is that I have a website on android that loads me correctly, on the desktop as well. But on iphone or mac os, I have problems and that is that it has many defects that is to say that it does not catch the styles.
I leave you part of the html and the css that I use in addition to the bootstrap 4 library.
They can also be viewed on my host to verify the problem of the iphone because at first glance on the desktop it looks normal, the problem is on an Apple device.
https://arstrikestudio.com/dlx/
HTML.
<div class="delexlp">
<span class="ir-arriba"> <i class="fa fa-arrow-circle-down"></i></span>
<div id="logo-div" class="paddingleft">
<div id="logo-img">
<img id="lgefect" src="delexni/img/default/delex2020-01.svg" width="100%" height="100%">
</div>
</div>
<div class="imgscroll">
</div>
<div class="col-lg-12 col-sm-12 oculto">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="d-none d-md-block sectlp">
<img src="delexni/img/default/delex.svg" alt="">
<br>
<div class="container">
<p class="text-center">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;"> SIMPLE, CONFIABLE Y RAPIDO </span><br>ganandonos su confianza libra por libra.</p>
</div>
<br>
<div class="text-center">
<a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
<a class="btn btn-secondary" href="login">INICIA SESION</a>
</div>
</div>
<div class="sectlpm d-md-none">
<div class="row spaceblank2" style="padding-left:18%">
<img src="delexni/img/default/delex.svg" alt="" width="300px" height="200px">
</div>
<div class="row" style="padding-top:40vh">
<div class="container">
<p class="text-center spaceblank">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;"> SIMPLE, CONFIABLE Y RAPIDO </span><br>ganandonos su confianza libra por libra.</p>
</div>
</div>
<div class="row" style="padding-left:15%">
<div class="text-center">
<a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
<a class="btn btn-secondary" href="login">INICIA SESION</a>
</div>
</div>
</div>
</div>
<div class="d-none d-md-block col-lg-6">
<img src="delexni/img/default/delex-x.svg" alt="">
</div>
</div>
</div>
</div>
CSS.
body{
background-size: cover;
background-repeat: no-repeat;
}
.delexlp{
background: url('../img/default/fondo2.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.delexlg{
background: url('../img/default/fondo.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#logo-div {
position: fixed;
height: 14vh !important;
width: 100vw;
}
#logo-div img{
width: 100%;
height: 100%;
background-size: cover;
}
.black{
width: 100vw;
height: 45px;
background: black;
}
.oculto{
display: none;
}
.imgscroll{
height: 6000px;
}
.textground{
font-size: 720px;
}
.ir-arriba {
display:block;
text-align: center;
padding:20px;
font-size:48px;
color:#fff;
cursor:pointer;
position: fixed;
bottom:20px;
right:50%;
margin: auto;
z-index: 6;
}
.btn-delex{
background-color: #f6871f;
color: white;
}
.btn-delex2{
background-color: #f6871f;
color: white;
}
#keyframes crescendo {
0% {transform: scale(1);}
100% {transform: scale(43);}
}
.paddingleft{
padding-left: 0 !important;
}
.sectlp {
padding: 15%;
}
.pdtop15{
padding-top: 15%;
}
#media (max-width: 700px) {
.form-control{ background-color: red; }
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
/*background-color: #fff;*/
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
width: 100%;
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
,.form-wrapper select,.form-wrapper textarea{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
.spaceblank{
background-color: white;
opacity: 0.89;
}
.spaceblank2{
background-color: white;
}
.pd30{
padding-top: 30%;
}
.pd60{
padding-top: 60%;
}
.pd200{
padding-top: 200%;
}
/* tabletas */
#media (min-width: 768px) {
}
/* escritorio normales */
#media (min-width: 992px) {
{ font-size:px; }
}
/* pantallas grandes */
#media (min-width: 1200px) {
}
/*****/
#media screen and (min-width: 700px) {
.form-control { font-size: px; }
.form-wrapper .section{
position: absolute;
min-height: 30px;
}
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
.form-control { font-size: px; }
}
#media only screen and (max-device-width: 480px) {
.form-control { font-size: 30px; }
.form-wrapper input[type="text"],
.form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
,.form-wrapper select,.form-wrapper textarea{
width: 100%;
outline: none;
font-size: 32px !important;
}
.form-wrapper .button{font-size: 32px !important;}
.ocultar{
display: none !important;
}
.form-wrapper .section{
min-height: 30px;
max-height: 100px
}
}

Answer 1

Well, the mobile version in all devices had problems in zoom, and I will explain how I fixed it.
First, when you transform: scale(); an element, if the width/height of the zoom rate are the same, you can provide only 1 parameter instead of 2 (as in original code). Also, doing it using jQuery.scroll() is really slow on some devices.
But you were indeed spot on in your code when you created a scale in the style attribute of the element, instead of an animation. If you do an animation, it gets a blurred zoom effect on desktop, inclusive. Also, putting the pictures embedded on a svg indeed made better optimization than converting the images to png (really!).
Putting the animation on the style, only iOS makes some blurriness, which I failed to remove.
So the main point of the answer is the css rule transform-origin.
Since each mobile device has a different screen size, simply zooming on center of image (which is the default behavior without transform-origin), makes the image zoom on the wrong spot.
SO, I got a specific coordinate of a working device which transform-origin worked, and applied a calculation to get the corresponding coordinates on each device (for instance, calculated using the document.documentElement.clientHeight for height). And then setting these coordinates on transform-origin it worked.
Also second important point: for the animation to behave performant on mobile, I've used requestAnimationFrame.
There is an important detail: you were totally correct in making a svg with black background and transparent letters. I've fiddled A LOT and the final answer made use of that, but I've trimmed the logo as I asked you, and made black borders calculated in css using calc(), to fill entire screen on mobile.
And finally, I've removed all superfluous paddings and applied flexbox on elements to get control of centering things vertically/horizontally.
You can see all my edits on https://github.com/niloct/delex_refactor, and I've published it using the awesome https://fast.io free hosting service integrated with github (on https://delex.imfast.io/).
Let me know if you have more questions. Thanks for reading.