[#45674] - Bug in Media Vendor Bootstrap min.css - breaking grids on old MacOs
- New
- Medium
- Build: 5.3.1
- # 45674
Joomla 5.3.1 to Joomla 6.03 (and maybe after) has been shipped with a corrupted version of .css in media/vendor/bootstrap. The vendor/bootstrap works on most browsers, but there are issues with older Mac desktops using Safari 15 and earlier.
The Joomla team need to ship with the official bootstrap.css. They appear to have corrupted the version shipped in Joomla.
Also - we need to see the BS version comments in the Joomla shipped version of BS. Otherwise it makes it hard to check what version of BS is being shipped.
To see the bug, you'll need to use a Joomla template that uses media/vendor/bootstrap, and not current online versions of bootstrap.
You will find the BS grid system will break on older macs, resulting with the (default) XS layout only. It looks bad on large desktop screens.
There may also be issues with shipped bootstrap js ... but lets just keep it simple for now.
Steps to reproduce the issue
Using a template that uses vendor/bootstrap.min.css
View the webpage with macOS Monterey Safari 15 and you will see that the BS grids will not render properly. Large screens will have the mobile layout.
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 Monterey Safari 15, Joomla 6.0.3
Additional comments
To fix, overwrite media/vendor/bootstrap/css/bootstrap.css (bootstrap.min.css and bootstrap.min.css.gz) with new versions. (BS 5.3.8 is good for Joomla 6.0.3)
The existing vendor/bootstrap/js seem to work (but might need more testing).
| Labels |
Removed:
?
|
||
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
| Title |
|
||||||
QuyTon
- | Labels |
Added:
bug
|
||
@Satish-Medar we don't assign issue, you can simply submit a pull request
Joomla 5.3 ships with BS 5.3.3 therefore according to the original report this must have been fixed
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.
Joomla's bootstrap is NOT corrupted. You can check the source code here
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,
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
FWIW some time ago Joomla switched from postcss to lightningcss and many of the patches are lost. Also fwiw Joomla only supports the last 2major versions of safari contrary to bootstrap that goes a bit further back
This still remains a problem for Joomla 5.4.3. The Joomla shipped Boostrap is still broken.
To fix, I have to continue calling the offical Boostrap 5.3.3 and not use what is shipped with Joomla.
The Joomla concept of loading parts of boostrap js is commendable - just badly executed. I hope somebody will listen and fix it.
As a professional website developer, we cannot simily ignore people with older browsers and machines.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45674.
Also broken for Joomla 6.0.3.
It has not been fixed.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45674.
After more testing, it is a bug for Safari 15 and earlier.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45674.
I'm seeing this bug when just using media/vendor/bootstrap/css/bootstrap.css (without using any bootstrap js). So I've simiplied the description to focus on the bugs with Joomla's corrupted bootstrap.css.
Its a really simple bug to fix... the Joomla Team just ship the offical bootstrap.css from bootstrap.
https://getbootstrap.com/docs/5.3/getting-started/download/
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45674.
Related #42439