Problem mit Symbolen, die Text auf dem iPhone überlappen

Guest · Post by **Guest** » 16 Jan 2025, 09:31

Bei einem einzelnen iPhone tritt das folgende Problem auf:

Das Laufsymbol überlagert den Text „Fitnesslevel“. Dieses Problem tritt auf Android-Telefonen nicht auf (soweit ich weiß, habe ich es nur auf 2 getestet).
Beim Wechseln anderer Eingabefelder mit einem Dropdown-Menü tritt das gleiche Problem auf auftritt. Ich bin mir auch nicht sicher, ob iPhone-Benutzer immer dieses Problem haben.
Ich habe den Link zur Website mit diesem Formular geöffnet

Telegramm
Google Chrome
Microsoft Edge

none scheint dieses Problem bei Android-Handys zu haben. Beim iPhone mit diesem Problem tritt dieses Problem sowohl bei Chrome als auch bei Safari auf.

Code: Select all







Fitness Profile Sign Up

body {
margin: 0;
font-family: Arial, sans-serif;
background: url('assets/images/8.jpg') no-repeat center center fixed;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: rgba(0, 0, 0, 0.7);
padding: 30px 20px;
border-radius: 15px;
text-align: center;
color: white;
max-width: 400px;
width: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.container.visible {
opacity: 1;
transform: translateY(0);
}
h2 {
margin-bottom: 10px;
font-size: 24px;
}
p {
margin-bottom: 20px;
font-size: 14px;
color: #cccccc;
}
.input-field {
position: relative;
width: 100%;
margin-bottom: 15px;
}
.input-field input, .input-field select {
width: 100%;
padding: 10px 40px;
border: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.2);
font-size: 16px;
color: white;
box-sizing: border-box;
}
.input-field input::placeholder, .input-field select {
color: rgba(255, 255, 255, 0.7);
}
.input-field i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
}
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
font-size: 16px;
background: linear-gradient(90deg, rgba(104,58,183,1) 0%, rgba(183,58,167,1) 100%);
color: white;
cursor: pointer;
margin-top: 10px;
transition: opacity 0.3s;
}
button:disabled {
background: rgba(104, 58, 183, 0.7);
cursor: not-allowed;
}
button:hover {
background: linear-gradient(90deg, rgba(183,58,167,1) 0%, rgba(104,58,183,1) 100%);
opacity: 0.8;
}
.g-recaptcha {
margin: 20px 0;
}

#processingPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 999;
}

select {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}

select option {
background-color: #333; /* Dark background for options */
color: white; /* White text for options */
}

select:focus {
background-color: rgba(255, 255, 255, 0.3);
}

select option:hover {
background-color: rgba(183, 58, 167, 0.7);  /* Hover effect on options */
}
#popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}

.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
color: black;
width: 300px;
}

.popup-content h3 {
margin-bottom: 15px;
}

.popup-buttons button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.confirm-btn {
background-color: green;
color: white;
}

.cancel-btn {
background-color: red;
color: white;
}













[/i]
[i]

[/i]
[i]

[/i]
[i]

[/i]

Fitness Levels
Newbie
Casual
Regular


Sign Up




Processing...
[i][/i]






Are you sure the information is correct?

Yes, Submit
No, Go Back





document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.querySelector('.container').classList.add('visible');
}, 1000);  // 1-second delay before animation
});

const form = document.getElementById('signupForm');
const submitButton = document.getElementById('submitBtn');
const popup = document.getElementById('popup');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
const processingPopup = document.getElementById('processingPopup');

let isConfirmed = false;

form.addEventListener('submit', function (e) {
e.preventDefault();

popup.style.display = 'flex';
});

confirmBtn.addEventListener('click', async function () {
isConfirmed = true;
popup.style.display = 'none';

submitButton.disabled = true;
submitButton.style.opacity = 0.5;

processingPopup.style.display = 'flex';

const recaptchaResponse = grecaptcha.getResponse();
if (!recaptchaResponse) {
alert("Please complete the CAPTCHA.");
submitButton.disabled = false;
submitButton.style.opacity = 1;
processingPopup.style.display = 'none';
return;
}

const formData = new FormData(form);
const formDataObject = {};
formData.forEach((value, key) => {
formDataObject[key] = value;
});

try {
const response = await fetch('link', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formDataObject),
});

processingPopup.style.display = 'none';

if (response.ok) {
alert('Signed up successfully!');
window.location.href = './end.html';
} else {
alert('Failed to sign up. Please try again.');
submitButton.disabled = false;
submitButton.style.opacity = 1;
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred. Please try again.');
submitButton.disabled = false;
submitButton.style.opacity = 1;
processingPopup.style.display = 'none';
}
});

cancelBtn.addEventListener('click', function () {
popup.style.display = 'none';
});

Problem mit Symbolen, die Text auf dem iPhone überlappen

Problem mit Symbolen, die Text auf dem iPhone überlappen ⇐ HTML

Quick Reply