Polaris-react: [DataTable] 1st column blank on iOS Safari narrow screens

[andrewlo]

Issue summary

On my iPhone 6S with iOS 12 in portrait mode, on Safari or inside Shopify mobile app, Data Table's 1st row appears blank:

On Polaris Styleguide:

In an embedded app:

It doesn't happen in landscape:

Expected behavior

Left column not blank on iOS mobile

Actual behavior

Left column is blank on iOS mobile

Steps to reproduce the problem

Issue is visible on Polaris style guide on iOS mobile Safari in portrait mode

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number:
• Browser: Safari
• Device: iPhone
• Operating System: iOS 12

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[BPScott]

From @solonaarmstrong on the original private issue:

I had a quick look and I think this might be related to using position: absolute in iOS/mobile. I am a bit stretched thin, so if anyone wants to pick this up, please do.

https://stackoverflow.com/questions/15933498/issues-with-absolute-positioning-of-div-in-mobile-browser
https://blog.idrsolutions.com/2013/05/ios-and-html5-gotcha-with-absolute-positioning/

[sergey-alekseev]

@BPScott thanks for the details. Any idea when this is going to be fixed? It's currently on the last issues page, so there is a chance everyone forgets about this.

[dleroux]

I spent some time the other day looking at this but didn't get to a solution. It is an issue with the first column being absolute positioned and not appearing outside the overflow-x: auto div. Tried playing around with the position: relative but that didn't work. Unfortunately busy on another project at the moment so hopefully someone else can have a look.

[sergey-alekseev]

@dleroux thanks for the info.

[chloerice]

After looking into this, the problem seems to be that the absolute positioning of the first column in order to fix it in place doesn't work properly in iOS Safari. Nothing I've tried so far CSS-wise has been able to quell the blank rendering of the cells. My guess is that this is a regression of the removal of the presentational column in https://github.com/Shopify/polaris-react-deprecated/pull/1723.

I'm focused on https://github.com/Shopify/web/issues/13367 right now since there seems to be so much urgency around it, but will checkout master in a commit prior to #1723 shipping to try to pinpoint if the issue in Safari came with that PR once the other issue mentioned is fixed.

[ruairiphackett]

Had a look into this and couldn't find any simple solution either. This was the only example that I saw that works on iOS devices with the width of the table exceeding the viewport width.

Unfortunately it involves having a duplicate of the table in the DOM and using one version to display the fixed column and the other to display the scrollable columns. I could put together a PR based on it, but I imagine it might not be a desirable way of solving this.

[ruairiphackett]

Video of codepen above on iPhone 6S Simulator: https://screenshot.click/2019-05-08_11-44-17.mp4

[dleroux]

Interesting approach. I was thinking to go in this direction: https://github.com/Shopify/polaris-react/pull/1426. Not sure which would be best.

It's not complete but may be easier to solve?

[ruairiphackett]

I prefer your approach @dleroux 💯

It does appear that the column is no longer fixed on iOS on that PR: https://screenshot.click/2019-05-08_14-23-53.mp4

I still think it's a more desirable solution than adding the complexity of the other approach I linked to.

[chloerice]

Fixed by https://github.com/Shopify/polaris-react/pull/1605