Bug 202172 – Aside/sidebar missing on jabcreations.com with both float and flex layouts in landscape mode

• Component: Layout and Rendering
• Status: RESOLVED INVALID

[John A. Bilicki III]

Created attachment 379496 [details]
Screenshot from iPhone 6S 12.4 / Safari 12.1.2 in landscape mode.

On my iPhone 6S 12.4 / Safari 12.1.2 the sidebar for www.jabcreations.com is missing in landscape mode.

I initially had the system using floats and then updated to using flex. All other browsers in desktop and mobile devices / browsers work perfectly fine.

Additionally after hooking up the iPhone to the Mac and using remote Inspector I found that the rendering of display was set to none however the arrow link to show where the code was does not actually show display: none. In fact I raw-copied all of the CSS and could not find #side {display: none;}

The layout works find in portrait mode. The site toggles the content/sidebar just fine in portrait mode. I tested the CSS media queries and they do not seem to effect the website in landscape mode.

I have also tried setting overflow: hidden; and adjusted the total width of each child (<main id="liquid"> and <aside id="side">) to total much less than 100% and they do not appear side-by-side. The only way I could get the sidebar to display was to use an explicit display: block !important;.

So either Safari is incorrectly rendering, not showing the correct reference for the display property or both.

[Radar WebKit Bug Importer]

<rdar://problem/55721317>

[John A. Bilicki III]

My apologies, this bug is invalid - the is_mobile() script on the platform is currently not compensating for the browser zoom level. It's been confirmed with the relevant scripts disabled.