Problem with iOS

1

Create some time ago, an application for Android with Ionic, very simple. Now that I have a Mac need to work exactly the same application, I thought that copying the html code, css and a few images suffice to develop it, but I was surprised to run it on the emulator ios. The functionality are all fine except some design issues that complicate the truth a little. Enclose an image of as seen in the browser as shown in the emulator to see if someone can help me.


Of course there are differences but I need guidance regarding what might be causing this problem. Also need to know which file I can change the image of the splashscreen and icon, as Android is easier in a folder with different resolutions, as it is in iOS?

Greetings!

2

up plz even I can not find solution

3

It’s probably having to do with where the CSS is referencing the background image URL for that panel.

See this thread:

It’s very possible that you just need to change the CSS rule for that panel to be background: url(‘img/background.jpg’); for example.

4

Yes, concerning the thread @jboonzybiz mentioned, in your case the paths need to be relative to your css file :wink:

Anyways, without the html and css that affects the shown parts, we cannot really help you with this.

5

Sorry, not sure why it quoted you. I thought I quoted mhartington O_o

6

Feel free to edit, might make things clearer :stuck_out_tongue:

7

I leave the codes so you can see that will be, but it seems strange that run in the browser and not in the emulator.

 <ion-side-menu side="left" style="background: url('img/fondo_menu.jpg');background-repeat: no-repeat;background-size: 260% 100%;">
     <div style="position: absolute;top: 0;bottom: 0;z-index: 10;overflow: hidden;min-height:  100%;max-height: 100%;width: 275px;background-color:#000000;opacity: 0.7;">
</div>

In my css file, edit the class .menu changing the background color to black, but the emulator still see white.

  .menu {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  min-height: 100%;
  max-height: 100%;
  width: 275px;
  background-color: #000; }
8

So, your filestructure should be like this for it to work: (and of course a lot more files XD)

www/
    index.html
    img/
        fondo_menu.jpg

If this is not correct, you should change your image path like mentioned above. If the above filestructure is correct, we will actually need some more info on your code, like a codepen which reproduces te problem when transferred to a native project. This will be beyond my current setup to test though, so we would need some help from another person to debug that.