Background upper layer img disappeared on Safari

Support
#1

Hello Pro!

I have another ticket open for this website but this is a different issue that just occurred this morning after updating wordpress core. (Not sure whether that is the problems)

This problem is isolated to one page - one section and only in safari funnily enough! Works a charm in Chrome still.

I tried using some CSS to override the current z-index but the z-index is fine and working as normal. When inspecting the element in safari there are no problems.

The section in question is labelled “Bottle Background” half way down the homepage.

#2

Hello @j300bac,

Thanks for writing in!

Your issue is browser-related. Safari does not seem to render the transparent background color in your png image. Perhaps this link can help explain your issue:

Cheers.

#3

Rue Nel - once again if you don’t want to help please don’t bump the thread. It is extremely important to me and to any Pro theme customer that you read the ticket carefully.

The upper layer png isn’t showing - at all. There are no transparency issue whatsoever - the issue is that the image was there and now it is not. If you look at the screenshot then compare to what is supposed to be there then you will see this. You haven’t even logged in so as you can replicate the issue…

Could you forward this onto Christian or Rad please?

Many Thanks

#4

Hi J,

I had similar issue and the issue itself is the PNG and Safari. It seems transparency is not working well with Safari, hence rendering the entire image transparent. Please check this as well https://stackoverflow.com/questions/17067708/css-background-does-not-work-in-safari

Have you tried using GIF with transparency, I’m not successful of that too but some made it possible on Safari.

Thanks!

#5

Hey Rad - thanks for getting back to me.

When I disable the parallax effect then the image shows correctly in safari. The problem only occurs when parallax is enabled. What are your thoughts on this?

Thanks in advance

J

#6

Hi J,

Yes, it’s one of the causing factors and it’s not limited to that. Based on my research, it’s a bug between PNG and Safari and it has a varying cause and effect.

Example, for that setup, it can’t handle the transparency changes (clipping) between the moving background. It could happen on a video too where clipping is added above it. It works on static background because Safari sees it as a single whole image to render (bottle with painting).

I’ll continue checking on my setup, and this seems Safari bug which is present even on their older version.

Thanks!

#7

Thanks again Rad - helpful as always :slight_smile:

The image has now fixed itself magically since reinstalling Pro so I believe that there is an intermittent bug with png and Safari! Hopefully my caches will store the correct version for the end users.

Awesome stuff - thank you

#8

Glad it’s working now! And you’re most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.