Is there a way to target Safari mobile specifically in Webflow and work around the issue of the mobile browser toolbar regions hiding a portion of the flex 100VH region? Would this require custom code or is there a solution within Webflow?

The issue of the Safari mobile browser toolbar hiding content is a common concern. Unfortunately, addressing this requires custom code since Webflow doesn't provide a native setting for this particular problem.

1. Understanding the Issue

• Safari's toolbar can affect the viewport height (vh) calculation, causing flex 100vh regions to be partially hidden. This issue typically appears on mobile devices.

2. Custom Code Solution

• Custom CSS is necessary to dynamically adjust the element heights. This can't be fixed directly within Webflow.
• Consider using JavaScript to set the height of an element to window.innerHeight instead of using 100vh. This accounts for the visible portion of the viewport.

3. Implementing the Fix

• Create a custom script that runs after the page loads: 

  ```javascript

  document.addEventListener("DOMContentLoaded", function() {

      var vh = window.innerHeight * 0.01;

      document.documentElement.style.setProperty('--vh', vh + 'px');

  });

  ```

• Apply the custom variable to your CSS in Webflow:

  ```css

  height: calc(var(--vh, 1vh) * 100);

  ```

• Add the CSS class in Webflow to the elements having issues, using the script to dynamically adjust their height.

4. Testing and Refinement

• Test on various devices and screen orientations to ensure the design looks as expected.
• If issues persist, consider adjusting the JavaScript to include window.addEventListener('resize', ...) for dynamic adjustments on window resizing.

Summary

To address the Safari mobile flex 100vh issue, use custom JavaScript to set the element height based on window.innerHeight. This solution accommodates the Safari toolbar and adjusts dynamically. Custom code is necessary since Webflow does not offer a built-in setting for this specific problem.