Issue:
When I set the background color of any div that is positioned over a page with a dark background to transparent (or any rgba set to 0%) safari displays a “black” instead of transparent. viz screenshots.
The link is below. the issue is visible on events page and bottom of the home page as well as the contact page.
Did you ever get this issue resolved?
No I didn’t. The old solution for this known problem (pick a color and set transparecy to 0) doesn’t work. Also what is really odd is that it happens only on the backgrounds that are very dark.
Hmm… I’ve never seen that one. I hope it’s not too much of a hinderance. You’re still plugging along alright I assume.
to tell the truth it is quite a problem since this is paid work and this means it is not up to par.
I’ve heard about Safari displaying black instead transparency on PNG’s specifically. Not sure that’s your issue, but this has come up before. It’s definitely Safari. If I find out why, I’ll shoot you a message.
Yeah I have done some digging around and testing. The known issue is that if transparenci is set to “Transparent” Safari will render that as black. And the solution for that was to change the background color from “transparent” to rgba: 255, 255, 255 0% (or any color at 0%). But this doesn’t not work in webflow anymore. But the really odd think is that if you look at the event page (link above) you will see the issue on the background of the tabs menu, but as you start scrolling down the page and the gradiend bacground of the page lightens up a bit the tabs menu background becomes fully transparent…
Send me the published link so I can open in Safari.
This issue was reported to be fixed in Safari 5.1.7, sorry had the wrong link.
http://centerstagevoicecoaching2.webflow.io/events
thanks for the time and effort, I really appriciate it
I should also mention that this issue happens only on the desktop version of safari. ios safari has no problem.
div no background = no issue
div set to transparent = no isuue
div set to 255 255 255 0 = no issue
So it is clearly a problem with the webflow elements.
Okay try to put a div inside the child div you want to be transparent, then absolute, give it a 0% with a z-index lower… so that’s 3 divs:
See if that tricks it?
ok so I that didn’t do anything. But I noticed something while doing it:
pay attention to the rectangular in the background
as soon as I hover over the top padding this rectangular becomes full width (there is no div or anything)
When I add the empty div it disappears
when I give the div background it appears again but at different location
When I set the opacity to 0% it’s still there and webflow automatically changes the 255, 255,255, 05% to transparent
adding more divs and all that stuff had no further effect.
Man!! Uh… you have something I’ve not seen. Boy I wish I had a solution. I’ll keep checking if I can find anything. It’s obviously a known issue for Safari - and it’s rendering of transparent, but I don’t know how it could work on IOS, but not on Desktop?? Strange.
On the page you sent, which section exactly and which element is this happening on - specifically show me that and I’ll look this evening and get back tomorrow if I find something.
Post your read-only link and I’ll check it out for ya.
so it is happening on all the webflow pre-build elements (only on nearly black backgrounds), namly:
Update:
issue:
transparent background appears black in safari.
to reproduce:
alternative:
notes:
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
