gantry5
gantry5 copied to clipboard
BUG with clearfix class in bootstrap-gantry.css for Safari on MacOS & iOS?
I'm raising this ticket as Reggie suggested from my Rocket Theme post available here: https://rockettheme.com/forum/joomla-template-photon/277936-fp-slideshow-arrows-collapse-on-safari-desktop-ipad
I was having a styling issue which was related to me adding a Joomla Custom HTML module to the front page of my website. As Reggie explained,
it is expected behavior, that the bootstrap-gantry.css file is called whenever a Joomla core module &/or article is called
So that explained why the bootstrap-gantry.css file was being called. The issue is that without the bootstrap-gantry.css file being called the clearfix class that was added to the particle worked just fine because the nucleus.css file contains this for the clearfix class
.clearfix::after {
clear: both;
content: "";
display: table;
}
It doesn't create any problems (because it doesn't have the :before pseudoelement) in contrast the bootstrap-gantry.css file has this for the clearfix class
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
since I added a Joomla module to the front page that caused the bootstrap-gantry.css file to be called and the clearfix class in the file contains the :before pseudoelement so it got added to the buttons and caused the problem because evidently Safari on MacOS & iOS does not like content: "";
. Changing it to content: "none";
fixes the problem.
This clearly seems to be a Safari browser issue. The easiest solution in my opinion would be to modify the clearfix class in the bootstrap-gantry.css file changing it to content: "none";
so as to avoid this problem in the future.
regards
@newkind & @mahagr this is the issue I messaged you about a couple of weeks ago.
@newkind & @hexplor I ran in to this issue again recently and had almost forgotten about it. Should I just make the change and do a pull request for this?
I removed the clearfix class in the Photon slider with the latest update, just fyi.
@simmonsr Thank you! I'll have to update the template.
If I understood the problem properly though, this should still be fixed/updated as it could potentially create other similar issues in the future with the clearfix class, correct?
@simmonsr Is this issue specific to Photon theme?