Header row covers first two rows of table in iOS 14.1 and iPadOS 14.1

[paulcrawford]

Describe the bug

When a table is rendered in Safari on either iOS 14.1 or iPadOS 14.1 the header row with the column descriptors covers the first two rows of the table using the latest version of phpMyAdmin, 5.04. This does not occur with MacOS 10.15.7. Nor does it occur if phpMyAdmin is reverted to version 5.0.2.

To Reproduce

Steps to reproduce the behavior:

1. Go to any database.
2. Click on any table
3. Look at header row and try to read the first two rows of the table.

Expected behavior

The first two rows of the table should be visible, not hidden by the header row

Screenshots

If applicable, add screenshots to help explain your problem.

Server configuration

• Operating system:Ubuntu 20.0.4
• Web server:nginx 1.18.0
• Database version: MariaDB 10.3.22
• PHP version: 7.4.3
• phpMyAdmin version: 5.04

Client configuration

• Browser: Safari
• Operating system: iOS and iPadOS 14.1

Additional context

Add any other context about the problem here.

[williamdes]

Seems to be related to #16277

cc @rajat315315

[rajat315315]

@paulcrawford A screenhot would have helped to replicate...

[paulcrawford]

Here they are: From MacOS (the correct display) From iOS (both rows from 2020-10-26 blocked from view by the header row, note the additional whitespace between “+ Options” and the header row) Thanks, Paul

[paulcrawford]

Sorry it seems that the screen shots did not come through on my email. So here they are again on GitHub

Here they are:

From MacOS (the correct display)

From iOS (both rows from 2020-10-26 blocked from view by the header row, note the additional whitespace between “+ Options” and the header row)

Thanks,

Paul

[arcanisgk]

the same problem in all browser OS:

windows 10 Google Chrome

duplicated as:

#16339

and

#16086

In phpmyadmin 5.0.2 the layout problem still persists from old version, i suggest go to 5.0.4 Version

[paulcrawford]

@arcanisgk,

The problem I am describing is not the same as the one you show above which also has the duplicates as noted. The one you show is a horizontal shifting of the header row when scrolling. I have seen this as well but basically accepted it as I can tell by the values in the table which column it is. This may well be corrected in 5.0.4 but, if so, it also introduced a vertical shifting of the header. Most of my tables are all in descending order as the values are timestamped with the most recent on top. This makes it critical to be able to see the top two rows, which cannot be seen with 5.0.4. I trust this can be corrected by 5.1.0 or else I will have to stay with 5.0.2. Interestingly, however, is the fact that "all browser OS" do seem to suffer the horizontal shift of the header but the vertical shift seems to affect only iOS and iPadOS but not Safari on MacOS nor Edge on Windows 10 nor Firefox on Ubuntu 18.0.4.5.

[JBES]

This is possibly a variation, PHPMyAdmin 5.0.4, with the immediate cause being the .sticky class in _common.scss line 2982:

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
}

[marto55555]

I think I figured out the root cause of this problem: position: sticky stops working when it's a child of an element with an overflow different from visible, and this is currently by design.

To reproduce the issue with phpMyAdmin, resize the browser window to be <=768px wide. There's a media query in _common.scss line 4190: .responsivetable { overflow-x: auto; }. This breaks the position: sticky and creates that header row offset which hides some of the table content.

I have found 2 ways to work around this:

1. Remove the overflow-x: auto altogether.
   Pros: the header actually sticks and scrolls horizontally without obstructing the table rows.
   Cons: The whole page scrolls horizontally, forcing the user to scroll to the left in order to see other elements like "Query results operations".
2. Use that media query to also remove the position: sticky and top: 60px for small-width devices.
   Pros: The first few table rows are not obstructed by the header, and other page elements like "Query results operations" are always visible.
   Cons: the header no longer sticks when scrolling down.

[williamdes]

Thanks for the feedback @marto55555
Any thoughts @MauricioFauth ?

[williamdes]

If help, i tried the chrome inspector so see code, and i changed in ".table thead th" position : absolute to position : static, and works for me, the "order" arrow should be static also, i think.

From: #16670 (comment)

[williamdes]

Hi @marto55555
What about just changing top to top: auto;, I do not see any negative effects