div.row > div.six.columns (or other sizes) doesn't seem to break to block (100%) on Safari iOS

[icaroscherma]

I designed / coded a page and in Chrome it's fine (tested using the responsive mode, aka device toolbar), but when I use on my actual phone, the div.row > div.six.columns doesn't seem to ocupy 100% of the width, breaking the whole viewport :( is it because of the @media queries using ppi instead of pixels? ( @media only screen and (max-resolution: 119dpi) and (min-resolution: 91dpi), not all html )

[robsheldon]

Hmm. Can you post a small example with this behavior? I'll add it to the CBT tests and figure out what's going on.

[icaroscherma]

This is the preview on chrome using responsive mode iPhone 8 Plus:

This is the actual phone:

Basically it's div.container.row with styles being .container { max-width: 100rem; margin: 0 auto; } and inside I have div.column > iframe (also tried with div.seven.columns but nothing changes) and another div.five.columns > p (no custom stylings on .column / .columns .

For me it seems that the grid sizing is tied to the ppi of the screen instead of the actual resolution, or maybe it's a particular bug with iOS.

[icaroscherma]

@robsheldon could you test it on Android or you had this behavior before?

[robsheldon]

I hadn't seen this behavior in previous device tests. I suspect there's some combination of html and the css that's causing this. I need to figure out the html part. I'll make time for it tomorrow at the latest.

[icaroscherma]

@robsheldon to me it's an @media issue, more specifically @media (min-width: 40rem) the .row and .column being handled.

Even the official website has the same (bugged) behavior.

Chrome on Responsive Mode:

Real iPhone 8 Plus (tried Safari, Chrome, etc):

[icaroscherma]

Seems to be an iOS issue as I said, ported from Miligram ( milligram/milligram#136 ).

My fix was replacing the rem to px as below:

@media screen and (max-width: 639px) {
  .row {
    flex-direction: column;
  }
  .column, .columns {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

Edit:
You can change the min-width: 40rem to 45rem but do some testing on iOS simulator ;)

[robsheldon]

Thank you for doing so much leg-work on this issue. I do want to fix it, my hang-up has been on finding the right approach for it.

The media queries are given in rem units to help improve support for environments with scaled displays -- some people with poor eyesight may have browser options set to scale things and using rems supports that better than px.

I'm reluctant to just bump the max-width on that media selector from 40 to 45rem because there are still going to be a handful of handheld devices with this behavior.

I think the right thing to do is to switch to using device-width and pixels, but that's not a change I want to make in a point update.

So, I'm going to do a bugfix release for the other two bugs that have been reported, and then see if changing up the media queries is going to break anything. If not, I'll do a minor release with that fix.