Streaming live at 10am (PST)

Flexbox and Visibility BUG


#1

I’ve got a major issue with visibility settings. If I set up a vertical-centered flexbox (or any flexbox type) div to only be visible on mobile, everything defaults to the left. I have done some testing and here is what I have found:

If div is visible on desktop mode, all is ok, regardless of visibility settings elsewhere.
If div is visible on tablet mode, bug only occurs if desktop mode is set to invisible.
If div is visible on landscape mobile mode, bug only occurs if desktop mode and/or tablet mode is set to invisible. Portrait mobile mode visibility does not cause bug.
And of course, if div is visible on portrait mobile mode, any instance of invisibility on other modes causes the bug.

Simply modifying the settings in mobile modes does not produce changes on the canvas.

This apparently seems to be a hierarchal bug issue. See the mobile mode of my homepage for example. Div Block 44 is the instance in reference. The first ‘44’ is ok, the second one isn’t, as this instance is only set to visible on mobile portrait mode.

Note: Previous bug issue was reported by another user in 2016, but there’s no record that it was ever resolved.

Thanks in advance!
Scottie


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

I have also noticed that this bug will also cause lines (made with 1px wide divs) to disappear as well.


#3

CORRECTION: I have discovered that the line divs aren’t disappearing, but for some reason they are hiding behind the image/map.


#5

Hi @scottiejhaines

Thanks for posting about this. Yes currently the visibility settings tend to break other display settings. Basically using these visibility settings is changing that specific element to `display:none, but it overrides the style panel’s display settings across breakpoints.

We are definitely hoping to get this resolved soon. For now, the best workaround is to use the style panel set elements to display: none.

Hope this helps :bowing_man:


#6

Thanks! This workaround helps.