Testimonial section/background image not rendering properly in Safari

Hi,

I think Sydney Pro is a fantastic theme. Unfortunately, I’m having a problem with how my website renders in Safari (on both macOS and iOS). The background image of the Testimonials section renders incorrectly as shown in the first pic below. You can see that the section looks as though it has too much bottom padding because too much of the image shows at the bottom of the section.

I have removed the image and tried a colored background instead but the same thing happens (too much space at the bottom). Strangely, if I refresh the page it usually renders correctly (shown in second image). I don’t have the same problems with other browsers.

Do you have any idea what the problem might be?

Pic1

Pic2

Hi,

Can you remove the password requirement for a bit so I can check your site?
Or if you can’t, please email me one at vlad[at]athemes.com

Hi Vlad,

I’ve removed the password.

Hi,

What Safari version are you checking this on your Mac and on what mobile device please? I can’t reproduce it in anything.

Hi,

How strange. I’m using macOS 10.11 / Safari 10.1 and whatever version of Safari ships with iOS 10.3.1

Other browsers render fine, it’s just with Safari that I’m experiencing the problem. At first I noticed it on iOS so I tried it on my Mac and it was the same

Hi,

Well, I can’t reproduce it on Browserstack which is strange because it’s usually accurate. Can’t reproduce it on a physical 5s either. I’ll ask one of my colleagues to check on a Mac. If you could please keep the site without password for a little longer.

Yes, I’ll leave it open longer. Thanks for asking your colleague to check it on their Mac. If they can’t replicate it then it must be something at my end

Hi Vlad,

If it helps, I’ve uploaded a screen recording showing what happens. It may be the case that it’s a browser caching bug:

Screenshot Video

Hi,

Really sorry about the delay. My colleague was away for a while. Can you remove the password protection please?

Hi Vlad,

That’s fine - I really appreciate your help with this. I actually deleted the website this evening and built it again from scratch but the problem was there again (in Safari only). Interestingly though, I’ve discovered that it’s only an issue if I have a single testimonial. If I have a second (or more) then the rendering works fine for each slider (including the first one to load). That’s even the case where some testimonials are longer than others - the section re-sizes without issue.

I’ve currently got a ‘test’ website up at the moment (a slimmed down version of the demo site). I’ve got only one testimonial on it so it’s displaying the issue (in Safari). I’ve removed the password protection so if your colleague wouldn’t mind taking a look, that would be great. I also don’t mind giving you/him a WordPress login to the site if that would help.

Hello there,

I visited your test site on my Safari on MacBook retina display, the issue doesn’t present. Please try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.roll-testimonials .owl-wrapper-outer {
  height: auto !important;
}

Let me know it works.

Regards,
Kharis

Hi Kharis,

The custom CSS fixes it!

Thank you very much for your help.

Regards,

Craig

You’re welcome, Craig.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

hi, If it is background video why it doesnt show in safari. I put your code in my site, I know it is for image, but Its not ok, Could you please guide. thanks