Optimization Issue on tablet

Design help Layout & Design
1

Hello,

I’m experiencing an issue with my Webflow site on tablets. The page content isn’t displaying properly – only the navbar and footer are visible, while the rest of the content seems to be invisible (although I can interact with it, like dragging my finger and seeing the text in the background color). This issue occurs across all pages, not just the homepage.

Here’s what I’ve tested:

  1. In Webflow’s Design Mode, everything looks fine.
  2. On other devices, the page loads and displays correctly.
  3. The preloader also doesn’t appear on the iPad Mini (it works fine on other devices).

Has anyone experienced something similar or have suggestions on how to fix this rendering issue on iOS devices?

I’d really appreciate any help or advice you can provide.

Thank you in advance!

Here is my site Read-Only:

https://preview.webflow.com/preview/mave2?utm_medium=preview_link&utm_source=designer&utm_content=mave2&preview=3ec692e118fd641453d9ed8b610a5da4&workflow=preview

2

Hi,

It sounds like you’re dealing with a rendering issue on iPads (particularly in Safari) where content is invisible, but interactive. This can be caused by several factors, and I’ll walk you through potential fixes.

1. Check CSS Styling for Tablet Breakpoints
Sometimes, CSS for tablet breakpoints (or the @media queries) might be affecting visibility:
Visibility or Display Issues: Inspect the tablet-specific styling to see if elements are being set to display: none, visibility: hidden, or are incorrectly positioned off-screen.
Check Z-Index: Ensure no content is being hidden behind other layers. Sometimes, a z-index issue can cause content to be rendered behind other elements (like your navbar or footer).

2. Overflow Hidden or Scroll Issues
In some cases, an element or container with overflow: hidden might be causing the content to not display properly.
Try removing overflow: hidden from containers or sections where the content isn’t appearing. This can affect visibility or cause content to be clipped, especially on smaller screen sizes like tablets.

3. iOS Safari Rendering Bug
Sometimes iOS Safari has rendering bugs that cause issues like this, especially when dealing with certain properties such as flexbox or grid layouts.
Try using -webkit-transform or transform to reset some elements’ positioning or visibility, as Safari has specific handling for transforms and layout rendering.
.your-element {
-webkit-transform: translate3d(0, 0, 0); /* Forces GPU rendering */
transform: translate3d(0, 0, 0);
}

4. Test with Webflow’s iOS Debugging Tools:
Webflow’s Device Preview might not always catch specific bugs related to iOS devices. If you haven’t already, try using Safari’s Responsive Design Mode or remote debugging tools to see how the site renders on the actual device.

To debug on an iPhone/iPad with Safari:
a. Open Safari on your Mac.
b. Enable Developer Tools if not already enabled (Safari > Preferences > Advanced > Show Develop menu in menu bar).
c. Connect your iPhone/iPad via USB.
d. In the Safari Develop menu, select your device and start debugging.

After that check the page speed on the Google PageSpeed Insighits and If you found the website performance & Core web vitals score is lowest. if you do not want to invest much time on optimizing yourself, you can try our speed optimization tool called Website Speedy, that comes with 14-days trial. It will do the optimization automatically for you.

(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)