Styles not applied on iOS

[ihor-zinchenko]

<svg-icon
  src="/assets/img/logo.svg"
  class="header__logo-img"
  svgClass="svg-icon"
  [viewBox]="'auto'"
  [ngClass]="{
    'white': isDarkMode && !isOpenMenu
  }"
></svg-icon>

.header__logo-img {
      path {
        transition: all .3s;
      }

      &.white {
        path.white {
          fill: #fff;
        }
      }

      &:not(.white) {
        path.dark {
          fill: #42474C;
        }
      }
    }

on iOS (chrome, safari) styles not applied On the Android and windows works correctly

[czeckd]

Could you provide a sample SVG to replicate this and what do you have defined as the svg-icon class? Thanks.

[ihor-zinchenko]

@czeckd try that https://dropmefiles.com/MzSmN, thanks)

[czeckd]

I'm not able to reproduce this: I see the d in the example.svg toggle between white and black on iOS browsers. Is this the expected behavior?

I do not have any styling in the svg-icon class though. Maybe that is part of the issue?

[setianke]

@czeckd @ihor-zinchenko

I was facing the same issue and tested a lot, the issue is caused by the view encapsulation, for me a quick work around was adding ::ng-deep before my css class/selector like ::ng-deep .svg-class the issue only occurs when the styles for the class is inside a view encapsulated component. Maybe the view encapsulation strategy for the svg-icon component could be changed but I am not sure about the issues that could cause.

@czeckd thank you for this great library and your open source work, appreciated

[czeckd]

@setianke - You are welcome and thank you for diving deep into this. Any ideas on how you'd change the view encapsulation. My first thought is that it might introduce more issues.