gantry5 icon indicating copy to clipboard operation
gantry5 copied to clipboard

BUG with clearfix class in bootstrap-gantry.css for Safari on MacOS & iOS?

Open N8Solutions opened this issue 6 years ago • 4 comments

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.

N8Solutions avatar Sep 24 '18 09:09 N8Solutions

@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?

N8Solutions avatar Feb 26 '19 19:02 N8Solutions

I removed the clearfix class in the Photon slider with the latest update, just fyi.

simmonsr avatar Feb 26 '19 19:02 simmonsr

@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?

N8Solutions avatar Feb 26 '19 19:02 N8Solutions

@simmonsr Is this issue specific to Photon theme?

mahagr avatar May 13 '21 15:05 mahagr