What is the issue with how the tabs display on Safari in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

When using Webflow to create websites with tabs, there have been reported issues with how these tabs display on Safari. The specific issue that arises is related to the use of the "flex" property in the custom code of the tabs component.

Here are the details of the issue with tabs on Safari in Webflow:

Display distortion: On Safari, the tabs may get distorted and not display correctly. This can result in misalignment, overlapping, or even disappearing of the tab elements.
Incorrect tab size: In some cases, the width or height of the tabs may differ from the intended design when viewed on Safari. This inconsistency can make the tabs look unprofessional or unreliable.
Text truncation: Another common issue is text truncation. Safari might cut off longer tab labels, making it difficult to read or understand the content of each tab.
Hover interaction problems: When hovering over a tab with certain effects applied, such as color change or underline, Safari may not always respond as intended. This can give a poor user experience and affect the overall functionality of the tabs.

To address these issues and ensure that the tabs display correctly on Safari, consider the following solutions:

Custom code adjustments: Check the custom code associated with the tabs component. The "flex" property in the code might need modification or removal to solve the display issues on Safari.
Responsive design: Make sure that the tabs component is designed and optimized for different screen sizes. Test the tabs on various Safari versions and devices to ensure proper display and functionality.
Safari-specific styling: Apply specific styles to the tabs or their container using conditional classes targeting Safari. This technique allows you to address Safari-specific issues without affecting other browsers.
Browser testing: Regularly test your website on Safari to identify any display issues with the tabs or other components. This will enable you to fix them promptly and provide a consistent experience for all users.

By following these suggestions, you can resolve the issues with how tabs display on Safari in Webflow, ensuring a seamless user experience across different browsers and devices.

Additional Questions:

How can I troubleshoot tabs display issues on Safari in Webflow?
Are there any specific CSS properties or methods to improve tab display on Safari in Webflow?
What are some alternative tab design options to consider in Webflow that can minimize display issues on Safari?

How can I reduce the height of the "cards images mask" div in Webflow's cards section layout?

How can I add a new link menu to the existing header in Webflow?

How can I create a super minimalistic audio player in Webflow where I can click a text block to start playing an audio file and press another text block or the same text block to stop it?

How do I prevent a custom embedded background video from looping in Webflow?

How can I prevent horizontal overflow in the DIV containing my image in Webflow?

What are some workarounds for the slow initial load time issue on Webflow, especially for business sites that are likely to be crawled by search engines before being visited by visitors?

Do I need to change the "Agency credits" custom field to rich text or use a different element in Webflow?

What parameters can be used to edit elements in the embed in Webflow?

Where can I find a tutorial on how to create an image reveal on click effect in Webflow for the mobile design of my website?

How can I make the "Current" state only apply to the category that is visible in the viewport on my menu page in Webflow?