Transparent background color safari

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.


https://preview.webflow.com/preview/centerstagevoicecoaching2?preview=cb2ecb945f0b273cc6ba093b0ccd6416

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.

  1. Does this happen even when you add a div over a black background… and don’t add any color?
  2. Can you add white to the div, then move to 0% transparency?

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:

  1. Parent background - Black
  2. Child - Transparent
  3. 2nd child - Absolute and Black with negative z-index

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:

  1. Home page:
  • Navbar
  • all headings and paragraphs
  • slider arrows
  1. about (visible only when objects with dark background scroll under):
  • Navbar
  • all headings and paragraphs
  1. one/one:
  • Navbar
  • all headings and paragraphs
  • oddly the tab menu seems to not have this issue on this page
  1. events:
  • Navbar
  • oddly the first heading and paragraph don’t display this issue on this page
  • tab menu
  1. contact:
  • Navbar

https://preview.webflow.com/preview/centerstagevoicecoaching2?preview=cb2ecb945f0b273cc6ba093b0ccd6416

Update:

issue:
transparent background appears black in safari.

to reproduce:

  • set page wrapper background to 93% gray or darker.
  • pick any text element (heading, paragraph, text, link) and give it a fixed position
  • add padding

alternative:

  • set page wrapper background to 93% gray or darker.
  • place a div in, give it width hight and set fixed position
  • add any text element inside the div

notes:

  • nesting multiple divs without text elements will not cause this issue
  • when text added the issue will effect the the parent div that has fixed positioning
  • changing color or opacity of the background on any element or combination there of has no effect on the result
  • this issue happens only on desktop safari. ios works fine

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