Bugs in the UI on Apple and Android devices

[christiemolloy]

JIRA issue https://issues.redhat.com/browse/MGDSTRM-2782
Thanks to @mmusil for reporting these issues:

today I'm testing the UI on our team Apple devices, they are a bit older, but I would suppose it's still valid. Three physical devices that I have access to:

• iPad Air 2 with the latest iPadOS14, Chrome 87, Safari - 1536 x 2048 px
• iPad mini 2 with iOS 12, Chrome 87, Safari
• iPhone 5s with iOS 12, Chrome 87, Safari

On each device, I've tried to access the UI from the default Safari and the latest Chrome 87 from the app store. Following problems were found:

• On iOS 12 devices, the Kafka UI is not working at all. Tried iPad mini 2, iPad mini 2019, iPhone 5s
  iOS12_not_loading.m4v
• iOS 12 devices, text on the overview page under Application Services sometimes briefly appears and is gone again
  ipadmini2_overview.m4v
• iPadOS 14, shadows of selected buttons are left after clicking in the place where the button was. This Issue was observed only on our iPad Air 2, not observed on iPad Air 4, iPad Pro and iPhone 12 Pro on Browserstack.
  ipad_kafka_delete.m4v
  kafkas_shadow_boxes.m4v
  1536 x 2048 px screen, iPadOS 14 and 13, vertical orientation - table with kafkas in the row legend "name" is broken. Horizontal orientation is ok. Happens in both Safari and Chrome.

I also have access to any "real" Apple device in Browserstack.com that we used for E2E testing. Tried following:
iPhone 12 Pro iOS 14 with safari
iPhone XS iOS 12 with safari
iPad Air 4 iPadOS 14 with safari - 1080x2160 px
iPad Pro iPadOS 14 - 2048 x 2732 px
iPad mini 2019 iPadOS 13 with safari - 1536 x 2048 px
iPad mini 2019 iPadOS 12 with safari - 1536 x 2048 px
What is worth mentioning, on Apple devices I haven't seen the problem with filter input as seen on Android.

note i didnt attach the videos here - but they are n the email thread titled: "Control Plane UI not working properly on Android (iOS probably too?)"

[christiemolloy]

Filed issue in PF React patternfly/patternfly-react#5682

[christiemolloy]

@mmusil I was unable to reproduce these bugs:

• iOS 12 devices, text on the overview page under Application Services sometimes briefly appears and is gone again
  ipadmini2_overview.m4v
• iPadOS 14, shadows of selected buttons are left after clicking in the place where the button was. This Issue was observed only on our iPad Air 2, not observed on iPad Air 4, iPad Pro and iPhone 12 Pro on Browserstack.
  ipad_kafka_delete.m4v

Still working on:

• On iOS 12 devices, the Kafka UI is not working at all. Tried iPad mini 2, iPad mini 2019, iPhone 5s
  iOS12_not_loading.m4v

Fixed by Sarah

• 1536 x 2048 px screen, iPadOS 14 and 13, vertical orientation - table with kafkas in the row legend "name" is broken. Horizontal orientation is ok. Happens in both Safari and Chrome.