[#29131] - [4.0] Accessibility settings break "Add module" modal
- Closed
- 18 Mar 2024
- Medium
- Build: master
- # 29131
Steps to reproduce the issue
- Go to your Atum template settings
- Enable
Monochrome,Highlight LinksorHigh Contrast - Go back to the admin dashboard
- Click the
Add module to the dashboardbutton at the bottom
Expected result
Modal shows
Actual result
Modal doesn't show and can no longer scroll
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Title |
|
||||||
Win 10, FF (latest) and Chrome (latest)
Have you compiled the latest code recently?
Yes. But just noticed that it is not on every dashboard, only on the main dashboard.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-05-19 11:15:47 |
| Closed_By | ⇒ | chmst |
| Status | Closed | ⇒ | New |
| Closed_Date | 2020-05-19 11:15:47 | ⇒ | |
| Closed_By | chmst | ⇒ |
pardon, it was not indended to close this
Issue confirmed.
Go to Home Dashboard, where you have to scroll down to reach Add module to the dashboard and click:
Click on a module:
Unable to scroll in the Modal up.
Not sure when but this appears to have been fixed now. I cannot replicate the scroll issue.
| Labels |
Added:
No Code Attached Yet
Information Required
Removed: ? |
||
| Labels |
Added:
bug
|
||
Reproducible in Chrome.
| Labels |
Removed:
Information Required
|
||
If the a11y classes (https://github.com/joomla/joomla-cms/blob/4.3-dev/administrator/templates/atum/index.php#L98) are added to the <html> tag rather than <body>, it fixes the issue.
The problem:
Modals use fixed positioning with height: 100% so that they are as tall as the screen. The height of a fixed element is relative to its containing block, which by default is <html>. So normally, the modal is as tall as <html>, meaning as tall as the visual viewport. However, some properties such as transform make an element act as a containing block for fixed elements. A CSS filter shouldn't do this, but due to a bunch of browser bugs, filter and other properties that cause a new composite layer also turn elements into containing blocks for fixed elements: w3c/csswg-drafts#400
When filter is set on body through an a11y class, suddenly <body> is the containing block for the fixed modal. The modal is not as tall as the viewport anymore but as tall as the scrollable area, since 100% refers to the body now. On pages that are scrollable, meaning <body> has a greater height than <html>, the modal container will be too tall and the modal positioned off screen.
Applying the a11y classes to <html> fixes the problem as @C-Lodder mentioned, since now it is always <html> that acts as modals' containing block, no matter if a filter is active or not.
| Labels |
Added:
Information Required
|
||
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-03-18 05:09:17 |
| Closed_By | ⇒ | C-Lodder |
Which system environment?
In my environment (Firefox, win10) everything is as expected wen adding new module, scrolling is possible and no errors.
What's wrong: There is no high contrast but this is not in scope here.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29131.