Let me provide a detailed explanation of my issue below, but the question remains the same:
Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari?
Here is a full explanation of my problem:
I am facing a challenge with the CSS min-height property specifically in Safari.
While other browsers like Chrome and Firefox allow values below 1px for min-height, Safari does not permit setting a value below 1px.
For example, I encountered a right-to-left (RTL) issue that occurs only in Safari. The problem arises when certain items are conditionally hidden based on user input in a form. It is crucial for the hidden items on the left side of visible elements to maintain some height (even if invisible) to prevent misalignment caused by floated elements to their right.
The solution cannot be as simple as using float:right for these elements because the RTL setting is optional and dependent on user preference. We also lack control over the order of elements lined up next to each other since the form is originally saved without RTL adjustments.
In Chrome, I successfully set the min-height to 0.0105px, allowing the element to push other elements to the right even when conditionally invisible (hence, avoiding the use of display:none to preserve the RTL layout).
However, Safari's limitation prevents using 0.0105px as the minimum value for min-height. Testing revealed that the minimum acceptable value on Safari was anything equal to or above 1px. Applying a blanket fix for Safari by setting all elements to 1px is not ideal considering scenarios where users might add numerous column elements which would culminate in unintended heights.
When faced with multiple columns conditionally hidden, having each at a default height of 50px in Safari is undesirable compared to 0.5px in Chrome.
I welcome any suggestions or thoughts on solving this issue effectively. Perhaps, there is a flaw in my conditional hide/show system design, and an alternative approach might yield better results. All ideas are appreciated.
Here is an illustration of my current implementation that works in Safari, although I aim to keep the height of the two left columns at 0px:
.column-wrapper {
background-color:red;
float:left;
width:30%;
}
.column-content {
background-color:grey;
}
.conditionally-hidden {
visibility:hidden;
height:0.1px;
}<div class="column-wrapper"> <!-- column must keep it's original width, but must be 0px in height when inner content is conditionally hidden -->
<div class="column-content conditionally-hidden">
This content is conditionally hidden
</div>
</div>
<div class="column-wrapper"> <!-- column must keep it's original width, but must be 0px in height when inner content is conditionally hidden -->
<div class="column-content conditionally-hidden">
This content is conditionally hidden
</div>
</div>
<div class="column-wrapper"> <!-- column must stay on right side, because of RTL layout -->
<div class="column-content">
This content visible
</div>
</div>