Open the admin of Joomla site
Go to system
Go edit an article
On the admin dashboard I expect two columns of modules.
In the system settings I expect three columns of modules.
In the article edit screen I expect the article settings on the right side of the text field.
All modules are stacked in one column in the dashboard and system settings.
In the article edit the settings are below the text.
Joomla 4.4.1
Safari desktop 15.0
On an iPad in Safari it's fine.
Labels |
Added:
No Code Attached Yet
|
No errors in the console. I expect some css code altered?
issue confirmed with safari 15.6 on monterey - tested with browserstack
weird
All fine using Safari 17.1.2, macOS 14.1.2.
Not sure what the support policy is for Safari
It did work up till 4.4 and does work on an iPad. Can confirm that Safari 16.4 is ok.
Something small, but significant must have changed in the css in the latest release.
I think I've found the root of the problem. I've compared the css of J4.4.0 with J4.4.1 in the Safari inspector. The 4.4.1 lacks a @media width at various points. Specifically these lines are missing in the css, which are causing Safari 15 and earlier to render the modules and sidebars over the full width of the screen:
@media (min-width: 768px) { .card-columns { grid-template-columns: 1fr 1fr; }
I thought I could copy the 4.4.0 media/templates css over the 4.4.1 css, but doesn't seem to be that simple. So, any thoughts where to correct the css?
I copied all template css versions (template.css, template.min.css and template.css.gzp) from Joomla 4.4.0 to the 4.4.1 install. That worked. Now the interface is correct again.
As an additional note: the problem also exists in the latest Joomla 5 release.
My workaround above seems to be overwritten by the recent Joomla update. Could you please find a permanent solution? It not only affects admins, but also the frontend, especially if you use Casiopea as a template.
Labels |
Added:
Backend Template
Frontend Template
bug
|
Please check your browser console for any javascript error messages