How can I fix the issue with border radius not displaying properly on iOS when applied to a parent div instead of the image itself in Webflow?
TL;DR
- Apply border-radius directly to the image for proper clipping on iOS.
- Set overflow: hidden on the parent div to hide any overflow beyond rounded corners.
- Optionally disable lazy loading or use background images instead for better compatibility.
- Use 3D transforms like translateZ(0) to trigger GPU acceleration and fix rendering glitches.
Border radius issues on iOS often occur when rounding is applied to a parent div rather than directly to the image. This is due to how iOS handles overflow and rendering of nested images.
1. Apply Border Radius Directly to the Image
- Select the image element itself in the Webflow Designer.
- Under the Style panel, set the same
border-radiusvalue as the parent div. - iOS has trouble respecting the parent container’s rounded corners if the image inside remains unaffected.
2. Set Overflow to Hidden on the Parent
- Select the parent div that should act as the clipping mask.
- In the Style panel, set
Overflow: Hidden. - This ensures that any part of the image that exceeds the border radius is not visible.
3. Ensure the Image is Not Lazy-Loaded via Native <img> Tag (Optional)
- Sometimes, Webflow’s default lazy loading (
loading="lazy") can cause rendering delays or glitches on iOS when combined with CSS clipping. - You can try disabling lazy loading per image by choosing "Eager" in the image settings, especially if it’s above the fold.
4. Use Background Images Instead (Alternative Approach)
- Consider placing the image as a background image on the parent div instead of using an
<img>element. - Webflow allows you to set rounded corners and overflow cleanly with background images using
Background: CoverandBorder-radiuson the same element.
5. Check for GPU Acceleration Issues
- Sometimes iOS renders DOM elements differently unless forced to use GPU acceleration.
- You can try applying the following to the parent div via Webflow’s custom styles:
- Add a 3D transform such as
transform: translateZ(0)in custom CSS. - Or in Webflow: set a
transformlike scale(1) to trigger hardware acceleration.
Summary
To fix border radius issues on iOS, apply border-radius directly to the image, set overflow: hidden on the parent, and optionally use a background image instead. These steps ensure that iOS correctly respects rounded corners visually and functionally.