CSS changes not rendering correctly in OSX / Safari

cage108 · Member · Aug 2, 2016 at 8:18 am
Copy link

Add topic to favorites
Hi,

I have certain pages on my site that have been customised with CSS on my website… users and the theme author have helped me over time to get it looking the way I want ( please see prior thread with existing CSS here )

It has now been brought to my attention that the page is not rendering in Safari on OSX correctly but works perfectly well in all other platforms. See the following page as an example sample and see this screenshot of what it looks like on Safari screengrab

Any direction would be appreciated.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 2, 2016 at 8:28 pm
Copy link
Hi there, I’ve pinged one of our developers on this issue as I’ve been unable to figure out what is going on with Safari on this. Hopefully I can be back to you within an hour with a solution.
cage108 · Member · Aug 2, 2016 at 9:19 pm
Copy link
thank you so much @sacredpath
thesacredpath · Member · Aug 3, 2016 at 12:34 am
Copy link
Hi, after chatting with our developer, we found that removing
padding-bottom: 0 !important;
from the following media query
@media screen and (min-width: 992px)
takes care of the Safari issue.

Give that a try and let me know.
cage108 · Member · Aug 3, 2016 at 6:22 am
Copy link
Hi @sacredpath
I have tried that now, and while it stops the footer text overlapping with the body of the page, it creates another problem.
That full css starting with the media query, creates a white box with rounded edges behind the body of the page that makes the page look a little less flat.
If I take out that suggested line, the white box then overlaps the footer which also is not good.

Is there anything else I can try?
thesacredpath · Member · Aug 3, 2016 at 7:01 pm
Copy link
You know, with so much custom CSS, it is difficult to figure out exactly what is causing the issue. I’ve taken a different tact with the following. Replace your existing
```
@media screen and (min-width: 992px) {
	.page-id-1640 #main
```
rule with the following which makes some adjustments and moves the background into #primary instead. In my testing, it worked in Chrome, FF and Safari. It would be good if you could check in Internet Explorer on a Windows system just to make sure. I checked in Browserstack and it looks like it is all good.
```
@media screen and (min-width: 992px) {
	.page-id-1640 #primary {
		max-width:1154px;
		margin:auto;
		padding:20px 20px 0 20px;
		background:rgba(255,255,255,0.5);
		border-radius:22px;
		color:#222;
		text-shadow:none;
		margin-left: 20px;
		margin-right: 20px;
	}
	.page-id-1640 #footer {
		clear:both
	}
}
```
thesacredpath · Member · Aug 3, 2016 at 7:02 pm
Copy link
If the above works, you will want to apply the above to any other pages that you have done this to (changing the page id # as necessary).
cage108 · Member · Aug 3, 2016 at 7:13 pm
Copy link
@sacredpath – you Sir, are a LEGEND!!!
That has worked… I tested on IE and other browsers now on Windows and also double checked on browserstack for OSX Safari.
I’m not going to pretend to understand your wizardry but thank you so much.
I will start going through the other pages and correcting the relevant CSS where this is used.
thesacredpath · Member · Aug 3, 2016 at 8:06 pm
Copy link
Hooray and you are welcome, and thanks for the compliment. Let us know if you have any additional questions.

Basically what I did was to move your background out of #main and into #primary instead. When I did that, it was not aligned properly, so I added some left and right margin to align it with the other page elements.
cage108 · Member · Aug 3, 2016 at 8:19 pm
Copy link
Thank you for that. I assume that by moving it to primary it removed the need for the following:
padding-bottom: 0 !important;

My original CSS did not have that line but when all my browsers just started overlapping all of a sudden, one of the users suggested I try that which worked until the safari issue came up. Just want to make sure I am understanding things correctly.
thesacredpath · Member · Aug 3, 2016 at 8:34 pm
Copy link
Yes, I’ve incorporated the 0 bottom padding into the other padding rule you see in the replacement CSS. You will see 4 values. They are top, right, bottom and left. Top, right and left are 20px and bottom is 0 in that rule.
cage108 · Member · Aug 3, 2016 at 8:44 pm
Copy link
ah I see. for some reason one one page I was having an alignment issue with that line you mention, so I replaced the whole line with just the following 25px
Is that ok? it seemed to have fixed my problem, but technically is that advisable? I assume that means that it puts in a 25px padding on all for sides?
thesacredpath · Member · Aug 4, 2016 at 6:04 pm
Copy link
That’s completely fine setting them all to 25px. Do what works for each individual page as needed. Some, due to the nature of the content may need a bit of tweaking. :)

No items found.