iOS 16.6.1 / iOS 17 PWA CSS Darstellungsprobleme / CSS Issues
Hallo liebe Entwickler,
ist euch auch aufgefallen, dass seit iOS 16.6.1, einschließlich iOS 17 Stylesheets für die mobile Ansicht ignoriert werden?
Das ist mir nicht nur bei meiner Website aufgefallen, sondern auch auf anderen Websites. Es muss am Safari Browser liegen, denn Google Chrome gibt das Stylesheet ordnungsgemäß wieder. Gibt es dafür eine Lösung?
CSS Code:
.background-image-container.fade-out {
z-index: -1; /* Verschiebt das ausgeblendete DIV hinter andere Inhalte */
}
.fade-out {
opacity: 0; /* Fügt die Opacity hinzu, um auszublenden */
}
.background-image-container {
background-color:#f5f5f5;
position: fixed; /* Oder 'absolute', je nach Bedarf */
top: 69px;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.background-image {
position: fixed;
top: 20%;
left: 0;
transform: translate(50%, 50%) scale(0.5); /* Hier kannst du die Skalierung anpassen */
width: 100%;
height: 100%;
background-image: url('/images/login-loader.svg');
background-position: center;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
max-width: 50%; /* Begrenzt die Breite auf 100% des verfügbaren Bereichs */
max-height: 29%;
}
body {
font-family : Arial, sans-serif;
font-size : 14px;
background-color : #f5f5f5;
color: black;
}
.content {
top: 50%;
left: 50%;
width: 30em;
height: 18em;
transform: translate(-50%, -50%);
position: fixed;
border: 1px solid #ccc; /* Border style */
padding: 20px; /* Padding inside the box */
width: 300px; /* Set the desired width of the box */
margin: 0 auto; /* Center the box horizontally on the page */
background-color: #f9f9f9; /* Background color of the box */
border-radius: 5px; /* Add rounded corners to the box */
}
img.logo {
position: fixed;
top: 30px;
left: 87%;
transform: translateY(-50%);
z-index: 2;
}
.failed-login-message {
position: fixed;
top: 175px;
margin-bottom: 20px;
left:75px;
color: red;
}
h1 {
font-size : 24px;
font-weight : bold;
margin : 0;
padding : 20px;
padding-left: 70px;
background-color : #009688;
color : #fff;
left : 0;
top : 0;
position : fixed;
width : 100%;
z-index : 1;
user-select : none;
}
form {
margin : 20px;
}
input[type="text"], select {
padding : 10px;
font-size : 14px;
border : #ccc solid 0;
margin : 10px 0;
width : 100%;
box-sizing : border-box;
border-radius : 20px;
}
input[type="text"] {
background-color : #f0f0f0;
color : green;
border-radius : 20px;
transition : all 0.3s ease-in-out;
}
input[type="text"]:hover, input[type="text"]:focus {
background-color : white;
color : black;
transition : all 0.3s ease-in-out;
}
input[type="password"], select {
padding : 10px;
font-size : 14px;
border : #ccc solid 0;
margin : 10px 0;
width : 100%;
box-sizing : border-box;
border-radius : 20px;
background-color: #f0f0f0;
}
input[type="password"]:hover, input[type="password"]:focus {
background-color : white;
color : black;
transition : all 0.3s ease-in-out;
}
label {
display : block;
margin : 10px 0;
font-weight : bold;
font-size:20px;
color: #009688;
}
button[type="submit"] {
background-color : #009688;
color : #fff;
border : none;
padding : 10px;
margin-top: 50px;
font-size : 14px;
font-weight: bold;
border-radius : 3px;
cursor : pointer;
width: 100%;
border-radius : 20px;
transition : all 0.3s ease-in-out;
}
button:hover {
background-color : red;
}
Am CSS habe ich nichts verändert. Das Problem ist nach dem iOS Update von 16.6 auf 16.6.1 erstmalig aufgetreten. In iOS 16.6.1 wurde das CSS immerhin noch richtig direkt im Browser dargestellt, dafür nicht in der PWA. Seit iOS 17 wird es in beiden Fällen nicht mehr richtig, bzw. gar nicht dargestellt, als wäre kein CSS vorhanden.
Mag sein, dass mein CSS nicht optimal ist, hat aber bis JETZT problemlos funktioniert. Ich finde im CSS keinen Fehler. Wie gesagt, Google Chrome kommt weiterhin mit dem CSS klar und Safari hatte bis zum iOS Update keine Probleme. Wurde etwas im Safari Browser verändert?
Ich freue mich auf eure Kommentare und viele Grüße!
iPhone X
