Ios not finding image assets when referenced in CSS

Ionic Framework ionic-v3
1

I have a menu that uses an image as a background, which is defined in CSS. It works great in a browser and on android, but iOS doesn’t find the images. I have images elsewhere in the app (img tags) that iOS is finding without issue. But when pulling in from CSS it isn’t finding them. Any ideas?

(I obviously have the image sitting in the /src/assets/img location.)

Menu (notice the profileHeader class)

<ion-header>
  <ion-toolbar>
    <ion-grid *ngIf="auth.user" class="profileHeader">

app.scss

.profileHeader:before{
    background-image:  url("../assets/img/xray.png");
    ...
2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Using Inspect you can change CSS dynamically and test until you find the correct url for the image.

1 Like
3

@Sujan12 - thanks for that pointer. Debugging on the iOS side seems very clumsy (but I’m new to it too). With your pointer to the safari inspector docs I was able to determine that this was a z-index issue. I have a transparent background and set the z-index to -1 to be behind other text. That worked fine on chrome/Android but not iOS. Setting it to 0 and increasing the other z-indexes was my workaround.

1 Like