What could be causing the globe image to overlap the dropdown/accordion content on the dark section of the homepage on iPhones in Webflow? Additionally, why is the Italic accent font not displaying properly on iPhones in certain areas on the site?

You're encountering two separate issues in Webflow on iPhones: (1) an image overlapping accordion content, and (2) an italic font not displaying properly. Here's how to address both.

1. Globe Image Overlapping Accordion/Dropdown on iPhone

The overlapping is most likely caused by absolute or fixed positioning, or a z-index conflict that's not handling viewport changes well on iOS.

• Check Positioning: Select the globe image element and verify its position settings in the Style panel. If it's set to absolute, fixed or sticky, ensure it’s contained relative to a properly set parent element.
• Adjust Z-Index: Make sure the accordion or dropdown content has a higher z-index than the globe image. Sometimes mobile Safari renders stacking differently than desktop.
• iOS Rendering Quirk: Safari on iPhones has known issues with overflow, z-index, and flexbox stacking. If your dropdown container is inside a parent with overflow: hidden, it may clip or ignore z-index.
• Use Webflow’s Mobile Preview and Live Testing on Devices: iOS may behave differently than Webflow’s tablet/phone preview. Use Webflow’s Preview + actual phone testing or BrowserStack for accuracy.

2. Italic Font Not Displaying Properly on iPhones

If the italic font style is missing or replaced by a fallback font on iPhones, it's likely a font file issue or missing style variant in your font upload.

• Check Font Files: Go to Project Settings → Fonts or wherever your font is integrated. Confirm that the italic variant (.woff/.woff2 files) has actually been uploaded.
• Missing Font Styles in Google Fonts: If you’re using Google Fonts, make sure the italic version is actively selected and loaded (e.g., '400italic', '700italic').
• Custom Fonts: If you’re using a custom font, and it lacks an italic file, iOS will fallback to a system font, causing display inconsistencies.
• CSS Style Check: Ensure that italic text isn't only marked by <em> or <i> tags — use a proper CSS style (font-style: italic) to ensure consistent rendering.
• Font Rendering on iOS: Safari on iOS sometimes fails to render certain font styles if the font is not well-optimized for mobile. Consider testing on multiple iOS versions to isolate the bug.

Summary

• The globe image is likely overlapping dropdown content due to absolute/fixed positioning or z-index issues, especially under iOS’s rendering behavior.
• The italic accent font may not be appearing correctly on iPhones due to missing italic font files or improper font loading, particularly if you're using a custom font or haven’t loaded all variants via Google Fonts.

Fix both issues by confirming style rules, checking font file uploads, and thoroughly testing on actual iOS devices.