Unter Windows funktioniert mein Programm für HTML/CSS. Unter iOS verschwinden die Hintergrundbilder. Was kann ich tun, u ⇐ IOS

[Anonymous]

Code: Select all

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background-image: url('Images/Background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
overflow: hidden;
position: relative;
}

/* Background swap for phones */
@media (max-width: 600px) {
body {
background-image: url("Images/Phone.png");
}
}

/* =======================
Main Content Layout
======================= */
.content {
position: relative;
z-index: 1;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

/* Title */
.title {
width: 50vw;
max-width: 600px;
min-width: 300px;
margin-top: 5vh;
z-index: 2;
position: relative;
animation: floatTitle 5s ease-in-out infinite;
}

@keyframes floatTitle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}

/* =======================
Buttons (Vertical Layout)
======================= */
.button-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 5vh;
margin-top: 6vh;
position: relative;
z-index: 2;
max-width: 90vw;
}

.button-grid button {
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: transform 0.2s ease;
}

.button-grid button: hover {
transform: scale(1.07);
}

.button-grid button img {
width: 160px;
height: auto;
display: block;
transition: transform 0.2s ease;
}

/* =======================
Stationary Bubbles
======================= */
.stationary-bubble {
position: absolute;
opacity: 0.8;
z-index: -1;
pointer-events: none;
}

.stationary1 { left: 3%; top: 10%; width: 4vw; }
.stationary2 { right: 5%; top: 25%; width: 3vw; }
.stationary3 { left: 12%; top: 35%; width: 2.8vw; }
.stationary4 { right: 10%; top: 45%; width: 3.5vw; }
.stationary5 { left: 18%; top: 55%; width: 3vw; }

/* =======================
Animated Floating Bubbles
======================= */
.bubble {
position: absolute;
animation: float 18s linear infinite;
opacity: 1;
z-index: -1;
pointer-events: none;
}

.bubble1  { left: 8%;   bottom: -100px; width: 4vw;  animation-delay: 0s;    animation-duration: 15s; }
.bubble2  { left: 14%;  bottom: -150px; width: 4.5vw;animation-delay: 1s;    animation-duration: 14s; }
.bubble3  { left: 10%;  bottom: -120px; width: 4vw;  animation-delay: 2s;    animation-duration: 12s; }
.bubble4  { left: 86%;  bottom: -100px; width: 4.5vw;animation-delay: 0.5s;  animation-duration: 16s; }
.bubble5  { left: 90%;  bottom: -160px; width: 5vw;  animation-delay: 1.5s;  animation-duration: 13s; }
.bubble6  { left: 84%;  bottom: -130px; width: 4vw;  animation-delay: 2.5s;  animation-duration: 17s; }
.bubble7  { left: 12%;  bottom: -110px; width: 3.5vw;animation-delay: 3s;    animation-duration: 12s; }
.bubble8  { left: 88%;  bottom: -170px; width: 3.8vw;animation-delay: 3.5s;  animation-duration: 15s; }
.bubble9  { left: 11%;  bottom: -140px; width: 4vw;  animation-delay: 1.7s;  animation-duration: 14s; }
.bubble10 { left: 93%;  bottom: -120px; width: 3.8vw;animation-delay: 0.8s;  animation-duration: 12s; }
.bubble11 { left: 7%;   bottom: -150px; width: 4.2vw;animation-delay: 2.3s;  animation-duration: 13s; }
.bubble12 { left: 89%;  bottom: -130px; width: 3.6vw;animation-delay: 1.1s;  animation-duration: 16s; }
.bubble13 { left: 13%;  bottom: -110px; width: 4vw;  animation-delay: 3s;    animation-duration: 11s; }
.bubble14 { left: 87%;  bottom: -100px; width: 4vw;  animation-delay: 4.2s;  animation-duration: 15s; }
.bubble15 { left: 15%;  bottom: -140px; width: 3.7vw;animation-delay: 2.6s;  animation-duration: 13s; }

@keyframes float {
0%   { transform: translateY(0) scale(0.95); opacity: 0; }
15%  { opacity: 0.9; }
70%  { transform: translateY(-90vh) scale(1.05); opacity: 1; }
100% { transform: translateY(-120vh) scale(1); opacity: 0;  }
}

/* =======================
Floating Stars
======================= */
.star {
position: absolute;
animation: drift 8s infinite ease-in-out;
opacity: 0.7;
z-index: 0;
pointer-events: none;
}

.star1 { left: 8%; top: 12vh; width: 40px; animation-delay: 1s; }
.star2 { left: 88%; top: 10vh; width: 45px; animation-delay: 3s; }
.star3 { left: 5%; top: 18vh; width: 35px; animation-delay: 5s; }

@keyframes drift {
0%   { transform: translateY(0) translateX(0); opacity: 0.7; }
50%  { transform: translateY(-10px) translateX(10px); opacity: 1; }
100% { transform: translateY(0) translateX(0); opacity: 0.7; }
}

/* =======================
Responsive Tweaks
======================= */
@media (max-width: 600px) {
.title {
width: 80vw;
margin-top: 5vh;
}

.button-grid {
margin-top: 9vh; /*