1

I'm using a logo as the navbar toggler for 768px screens and below. On the developments tools and android it works as intended with the PNG preserving its alpha channel. Android Screenshot of Logo with PNG working as it should

However, I have tested it on an iPhone 8 and get the following result in multiple browsers. iPhone Screenshot of Logo that has some transparency but an added white background

I then tested it on MacOS Big Sur and get a similar issue but only with Safari. MacOS Big Sur Screenshot of Logo that has no transparency but an added white background

The code below is the styling that I have for this element. I have tried it as just an img in html, or a picture by itself. My latest attempt with the background property is after following some answers from stack.

.logo-nav-toggle {
        width: 75px;
        height: 100px;
        background: rgba(255, 255, 255, 0) url('/src/img/d_labyrinth_transparency_75x100.png') no-repeat center center;
      }

Here is the PNG that I am using:

PNG I am using

A copy is available here:
enter image description here

Any ideas what the solution to this could be?

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
Orwellianturtle
  • 36
  • 4
  • 1
    Could you expand on what the use of rgba(255, 255, 255, 0) in the background is to be? – A Haworth Jan 31 '22 at 18:27
  • 1
    This was just the latest iteration on the advice from other forum posts such as this: https://stackoverflow.com/questions/13100847/transparent-pixel-renders-different-on-pc-and-iphone?noredirect=1&lq=1 I have tried it simply as: background: url('/src/img/d-labyrinth_transparency_75x100.png Which yields the same results – Orwellianturtle Jan 31 '22 at 18:30

0 Answers0