Pagination disabled buttons are not disabled on IOS Safari or mobile like iPad #33965
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
This can be seen in ant design documentation page for Pagination. Minimal reproduction link taken from there.
- Ok with Linux/Windows any browser
- Ok with Mac Chrome
- Bad with Mac Safari
- Bad with iPad Safari
- Bad with iPad Chrome
What is expected?
- Pagination button "Previous Page" should be disabled.
- Text inside "<" should be dimmed.
- On hover should be "not-allowed" cursor, border color gray and not changing.
What is actually happening?
- Pagination button "Previous Page" is enabled.
- Text "<" is black.
- On hover cursor is "pointer", border blue.
| Environment | Info |
|---|---|
| antd | 4.18.6 |
| React | 16.13.1 |
| System | iOS |
| Browser | Safari |
I personally do not have Mac or iPad, but colleagues are complaining and showed it to me. I have reproduced it with epiphany-browser under ubuntu.
Checking with dev-tools I found, that for given functionality is responsible CSS class:
.ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus-visible .ant-pagination-item-link {
color: rgba(0, 0, 0, 0.25);
border-color: #d9d9d9;
cursor: not-allowed;
}
Safari (and iOS mobile Chrome) ignores "ant-pagination-disabled" class and has CSS only for ".ant-pagination-prev button", which makes prev button to look like active.