Bug in Media Vendor Bootstrap min.css - breaking grids on old MacOs

[Chris-OW]

Joomla 5.3.1 (and maybe after) was been shipped with an incompatible version of .css with the shipped .js in media/vendor/bootstrap. The vendor/bootstrap works on most browsers, but there are issues with old Mac desktops.

For the next minor release please ship with an updated bootstrap.css (BS 5.2.3 works fine).

Also - please do not strip out the BS version comments in your shipped version of BS. It makes it hard to check what version of BS you are shipping - and has probably lead to this problem?

You'll need to use a Joomla template that uses media/vendor/bootstrap (and not current online versions of bootstrap).

You'll find the BS grid system will break on old macs, resulting with the (default) XS layout only. It looks bad on large desktop screens.

Steps to reproduce the issue

When using a template that uses vendor/bootstrap.min.css - and a script from vendor/bootstrap/js (say dropdown.min.js) - you will find on macOS Catalina Safari 13, BS grids will break and it will not render properly.

Expected result

For large screens, content should be shown in grids.

Actual result

Only shows layout for XS for any screen size. (No grid functionality)

Also other issues...

System information (as much as possible)

Bug shows up on old Mac - use lambdatest - macOS Cataline Safari 13, Joomla 5.3.1

Additional comments

To fix, overwrite media/vendor/bootstrap/css/bootstrap.css (bootstrap.min.css and bootstrap.min.css.gz) with new versions. (BS 5.2.3 works fine)
The existing vendor/bootstrap/js seem to work (but might need more testing).

[brianteeman]

Related #42439

[Satish-Medar]

@Chris-OW I’m happy to work on this issue. Could you please assign it to me?

[Chris-OW]

@Chris-OW I’m happy to work on this issue. Could you please assign it to me?

Thanks Satish.

I don't think I have access to assign. I see no cogs when I log in. Maybe the moderators can do that?

[alikon]

@Satish-Medar we don't assign issue, you can simply submit a pull request

[brianteeman]

Joomla 5.3 ships with BS 5.3.3 therefore according to the original report this must have been fixed

[Chris-OW]

It doesn't appear so. I think somebody on the development team keeps making the same mistake.

If they left in the Bootstrap version comment - we may be able to tell what version they used - and where ... but sadly somebody keeps removing this critical bit of info.

This Bug still exists. Any old MacOS will not render the Joomla distributed BS correctly.

I can confirm again... the problem is solved by overwriting the Joomla 5.3.3 packaged vendor/bootstrap/css/bootstrap.min.css with a the official Bootstrap version 5.3.3 (https://github.com/twbs/bootstrap/releases/tag/v5.3.3)

So the solution is to basically

• Don't remove Bootstrap version comments
• Replace vendor/bootstrap/css/bootstrap.min.css with a proper official version. (Joomla's version is corrupted - or not version 5.3.3)

Until they do this... Joomla websites that use the shipped vendor code will continue to fail for old Macs. (And who knows what else fails?)

I'm about to give up and just provide an official uncorrupted version of BS in my template. I cannot keep having websites fail everytime Joomla updates.

[brianteeman]

Joomla's bootstrap is NOT corrupted. You can check the source code here

[Chris-OW]

The Joomla 5.3.3 shipped media/vendor/bootstrap/css/bootstrap.css is 271KB and has 100's of lines different to the Official Bootstrap 5.3.3 bootstrap.css (275KB).

After a quick look, nothing major, but maybe it could be that the Joomla shipped bootstrap.css omits the "0" on decimals. I don't know, I don't want to argue, don't have time to debug 14,000 of lines... when it should be the same as the Bootstrap official.

Joomla Version...

.g-md-1, .gx-md-1 {
    --bs-gutter-x: .25rem;
  }

Official Bootstrap version 5.3.3

  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }

The Joomla shipped bootstrap.css is definitely not the same - and indeed breaks on older Mac's.

Replacing the Joomla shipped bootstrap.css with an official Bootstrap bootstrap.css fixes the problem,

[brianteeman]

I can confirm that their is a bug somewhere in our build scripts that is indeed stripping the comments/version number from the bootstrap.min.css. Its weird as it doesnt happen in a developer build. I apologise for doubting you