No Code Attached Yet Backend Template Frontend Template bug
avatar stimpsonjcat
stimpsonjcat
1 Dec 2023

Steps to reproduce the issue

Open the admin of Joomla site
Go to system
Go edit an article

Expected result

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.

Actual result

All modules are stacked in one column in the dashboard and system settings.
In the article edit the settings are below the text.

System information (as much as possible)

Joomla 4.4.1
Safari desktop 15.0

Additional comments

On an iPad in Safari it's fine.

Schermafbeelding 2023-12-01 om 15 15 26 Schermafbeelding 2023-12-01 om 15 14 35 Schermafbeelding 2023-12-01 om 15 13 50
avatar stimpsonjcat stimpsonjcat - open - 1 Dec 2023
avatar joomla-cms-bot joomla-cms-bot - change - 1 Dec 2023
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 1 Dec 2023
avatar brianteeman
brianteeman - comment - 1 Dec 2023

Please check your browser console for any javascript error messages

avatar stimpsonjcat
stimpsonjcat - comment - 1 Dec 2023

No errors in the console. I expect some css code altered?

avatar brianteeman
brianteeman - comment - 1 Dec 2023

issue confirmed with safari 15.6 on monterey - tested with browserstack

weird

avatar fgsw
fgsw - comment - 1 Dec 2023

All fine using Safari 17.1.2, macOS 14.1.2.

avatar brianteeman
brianteeman - comment - 1 Dec 2023

Not sure what the support policy is for Safari

avatar stimpsonjcat
stimpsonjcat - comment - 1 Dec 2023

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.

avatar stimpsonjcat
stimpsonjcat - comment - 6 Dec 2023

I think we do have serious issue here, since the frontend is also messed up if you use Casiopea as a template.
Safari 15 isn't that old, so it should be supported in my opinion.

Schermafbeelding 2023-12-06 om 17 52 23
avatar stimpsonjcat
stimpsonjcat - comment - 8 Dec 2023

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?

avatar stimpsonjcat
stimpsonjcat - comment - 15 Dec 2023

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.

avatar stimpsonjcat
stimpsonjcat - comment - 29 Jan 2024

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.

avatar Hackwar Hackwar - change - 26 Mar 2024
Labels Added: Backend Template Frontend Template bug
avatar Hackwar Hackwar - labeled - 26 Mar 2024
avatar Hackwar Hackwar - labeled - 26 Mar 2024
avatar Hackwar Hackwar - labeled - 26 Mar 2024
avatar coolcat-creations
coolcat-creations - comment - 8 Oct 2024

Can't reproduce with 5.2 and Safari @Hackwar

avatar brianteeman
brianteeman - comment - 13 Jan 2025

I found the problem

Up until 4.4.0 the media queries were in the form
@media (min-width: 1200px)

From 4.4.1 the media queries are in the form
@media (width >= 1200px)

Safari 15.x does not understand the latter

Bootstrap own build tools generate media queries in the form
@media (min-width: 1200px)

At this moment I dont see why or how our build tools are doing this wrongly

avatar brianteeman
brianteeman - comment - 13 Jan 2025

@hans2103 @dgrammatiko any ideas?

avatar brianteeman
brianteeman - comment - 13 Jan 2025

If I was to guess the problem started with this PR #42325 by @C-Lodder with the change to lightningcss from postcss

avatar C-Lodder
C-Lodder - comment - 13 Jan 2025

Joomla 4+ browser policy is the last 2 major versions.
The latest stable version of Safari is 18.2, so Joomla 4 supports the latest patch of v16 (and above).
Support for ranged media queries was added to Safari 16.4, so I'd suggest updating Safari and trying again.

Lightningcss also needs updating.

That said, I did miss adding the browser targets to the CSS compiler.

avatar brianteeman
brianteeman - comment - 13 Jan 2025

Joomla 4+ browser policy is the last 2 major versions. The latest stable version of Safari is 18.2, so Joomla 4 supports the latest patch of v16 (and above). Support for ranged media queries was added to Safari 16.4, so I'd suggest updating Safari and trying again.

The latest version is 17.4.1 according to https://www.whatismybrowser.com/guides/the-latest-version/safari

Lightningcss also needs updating.

That said, I did miss adding the browser targets to the CSS compiler.

its a bit odd to be compiling bootstrap and presenting different css to bootstrap's own compile

avatar brianteeman
brianteeman - comment - 13 Jan 2025

I will leave it to the maintainers to decide what should be done here

Add a Comment

Login with GitHub to post a comment