Row/Columns Wonky in Safari

jonathanrockett · April 13, 2019, 10:44pm

Hey Guys,

Not totally sure how to describe this issue (see screenshots)… It seems in Safari that a chunk of my page is forcing to one column (but there’s also an issue with the image spacing and sizing)… This seems to be a very similar issue to this thread: https://theme.co/apex/forum/t/safari-display-issues/54496 but I’m a novice and couldn’t quite get what’s going on…

Chrome: https://www.dropbox.com/s/v1djlitf5qcs618/Screenshot%202019-04-13%2017.23.58.png?dl=0
Safari: https://www.dropbox.com/s/srapgbzo4fsozy7/Screenshot%202019-04-13%2017.23.12.png?dl=0

Any help would be really appreciated…

rad · April 14, 2019, 12:07am

Hi @jonathanrockett,

Thanks for reaching out.

It’s kind of weird, it’s happening on Safari due to pseudo CSS selector like this

.x-container:before, .x-container:after {
    content: " ";
    display: table;
}

Where it has no issue on my installation using the same pseudo selector. I’ll continue checking, but please add this CSS to Theme Options > CSS as temporary fix.

.x-container:before, .x-container:after,
.x-section:before, .x-section:after {
     display: none;
}

Thanks!

jonathanrockett · April 15, 2019, 1:25am

Hey Rad - Thanks for the quick response! (super rad

So I added your CSS and, good news, it fixed the images on Safari for that page… but it broke a LOT more on the site (across all browsers)…

Take a peek at the results on all browsers… Feel free use the logins and play with it - This is NOT a live site yet (but of course was supposed to be ‘yesterday’ like all client sites, lol), so take a look…

rad · April 15, 2019, 2:26am

Hi @jonathanrockett,

In that case, let’s limit it for Safari Only.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
::i-block-chrome, .x-container:before, .x-container:after,
.x-section:before, .x-section:after {
     display: none;
}
}

I tried it and it works, cheers!

Thanks!

jonathanrockett · April 15, 2019, 7:16pm

Hey @Rad - Thanks! I tried the new CSS (cleared the Safari cache and used private browsing mode), and it still didn’t work for me… Hmmm…

I even tried removing the other CSS (for centering images), in case they were conflicting, and it fixed the site on the other browsers, but Safari is back to the busted version:

Weird that it’s working for you and not me…

paul.r · April 16, 2019, 5:50am

Hi @jonathanrockett,

You can try this code instead.

.x-container:before, .x-container:after {
    content: " ";
    display: block;
}

Hope that helps

jonathanrockett · April 16, 2019, 5:37pm

That worked Great! Thanks Paul!

On a final note with this issue: You’ll notice the buttons on Safari were breaking to a second line as well, like this:

As opposed to other browsers (as they should be) like this:

Is there some CSS we can add for the buttons as well?

Thanks again!

paul.r · April 17, 2019, 3:39am

Hi @jonathanrockett,

I have checked in safari and it is no longer doing. I have also checked your button and can see that you have set min width to 200px which seemed to have fix it.

Try adding a min width or to your other buttons as well.

Thanks

jonathanrockett · April 18, 2019, 12:09am

Hey Paul, It’s odd… I don’t see a change, and the button text is definitely still braking to two lines, regardless of container width… Do you have a screenshot?