Woocommerce-admin: Dashboard and summary numbers layout broken in iOS

[joshuatf]

Describe the bug
In older browsers that use larger screen sizes (e.g, iPad iOS <10.3), the summary numbers and dashboard chart layout are broken since they use grid styles.

To Reproduce
Steps to reproduce the behavior:

1. In any device that doesn't support css grid styles, open the dashboard or any order report.
2. Note the summary numbers and chart layout.

Screenshots

Smartphone (please complete the following information):

• Device: iPad pro 12.9 inch
• OS: iOS 10.2
• Browser: Safari

Additional context
Add any other context about the problem here.

[justinshreve]

In older browsers that use larger screen sizes (e.g, iPad iOS <10.3)

Our browser guidelines are https://make.wordpress.org/core/handbook/best-practices/browser-support/ and state "Last 2 iOS versions.".

Current iOS is 12.1.4 and the last 10.2 version was January 2017.

We have autoprefixer in place for fixing (most) Grid styles in IE11 since we still support that, but otherwise I think we can probably close these older iOS issues if they only affect 10.2 and older.

[joshuatf]

@justinshreve Does "Last 2" mean the latest 2 versions or the last 2 versions released prior to the current version? It sounds like the latter to me, but maybe I'm interpreting this incorrectly.

The other (minor) thing to take into consideration here is the latest versions of Opera Mini (though support says just Opera and not explicitly Opera Mini) also don't support grids as well as a few other more obscure browsers. https://caniuse.com/#feat=css-grid

[joshuatf]

Here are version stats usage as well in case that's a factor. Appears to be ~7% across iOS devices <=10.x and ~24% for iPads (though I imagine there are less people using iPads to work in their dashboard).

[justinshreve]

or the last 2 versions released prior to the current version

This.

My understanding of this would be 12.1, 11.4, and 11.3 would be supported --- not major 11, & 10 versions.

Maybe worth discussing this (and other possible issues like Opera Mini) in the next hangout? cc @timmyc

[timmyc]

Maybe worth discussing this (and other possible issues like Opera Mini) in the next hangout? cc

Let's do that, I think we should also check perhaps with some folks on Gutenberg to get their thoughts on the matter.

[justinshreve]

@timmyc Not sure if we ever got an answer from someone directly, but plugging https://github.com/WordPress/gutenberg/blob/master/packages/browserslist-config/index.js into https://browserl.ist/?q=%3E+1%25%2Cie+%3E%3D+11%2Clast+1+Android+versions%2Clast+1+ChromeAndroid+versions%2Clast+2+Chrome+versions%2Clast+2+Firefox+versions%2Clast+2+Safari+versions%2Clast+2+iOS+versions%2Clast+2+Edge+versions%2Clast+2+Opera+versions gives us a list of versions to target.

According to that, we should be targeting Opera Mini, though not necessarily the older iOS versions.

In Calypso, we target a bit more:

https://browserl.ist/?q=last+2+versions%2C+Safari+%3E%3D+10%2C+++iOS+%3E%3D+10%2C+++not+ie+%3C%3D+10%2C+++%3E+1%25

[joshuatf]

Nice! Thanks for digging that up @justinshreve. Looks like you were right on the money with iOS versions.

Opera Mini seems to be our only outlier. If we're planning on supporting Opera Mini, should we keep these grid issues?

If so, I'll go ahead and rebase https://github.com/woocommerce/woocommerce-admin/pull/1653, otherwise I can close it out.

[timmyc]

I say we keep the issues open, but lets not actively work on them for now. Perhaps we need some priority labels for issues.

[joshuatf]

Sounds good. @timmyc Should I close out #1653 for now or give it a rebase?

[timmyc]

I'm fine with closing it out for now.

[timmyc]

Since we haven't had any user reports of these older mobile safari bugs, i'm going to close them out.