I'm using icon utilities like these to display some of the content.  Seems like flexbox layout gets "Confused" by this.  I have a box on box utilty icon like this being used in the header:

.u-icon-box-on-box:before {
    content: "⧉";
}

It displays fine when viewing the page on my laptop, but on my iphone 6s plus it completely disappears in both portrait and landscape mode.

Also on the right hand side of the header there is a fa-chevron-right icon.  This gets rendered outside of the chevron element on my phone when in portrait mode.  It looks like the rendering engine "forgets" that "content: " content from pseudo elements (:before, :after, etc) should be part of the container layout.

If you are saying that Chrome on IOS is not rendering something as it does in devtools when in device mode, this is not something that we will likely be able to solve since Chrome on IOS uses Webkit and not Blink.

Devtools only tries to show apx what it might look like on IOS devices, but does not emulate the rendering engine that Webkit/Safari uses and instead uses Chrome's layout engine (Blink) constrained and adjusted to look and feel approximately how the desired IOS device might work/feel.

In short, we will likely never be able to do this.

Thanks for the report though!

Thanks for the heads up.  I'll file a report with webkit.  Did you have a chance to see whether the page renders OK on Android in general?

Webkit report:
https://bugs.webkit.org/show_bug.cgi?id=170583