SVG <Image> tag only partially rendering on iPhone

Question

I have been developing a web page "game" on my PC based in HTML, SVG, and Javascript. It has a large image of the earth loaded into the SVG views through the SVG <image> tag. Testing on my PC this works with no problem, however recently I published it to a public web page ( http://rbarryyoung.com/EarthOrbitalSimulator.html ) and discovered that only the bottom right quarter of the SVG is rendering on both SVG views on my iPhone and iPad. Like this:

At first, I thought that it was just the image in the SVG viewports, but then I realized that the entire SVG viewport was black except for the lower-right quadrant. The SVG viewport is correctly fully sized, it just appears as if there is some black mask over 3/4s of it (or only 1/4 of it renders).

Here's what I think are the relevant HTML code lines, the containing Div tag for the first SVG view (line 67):

<div id="divSvg1" 
    style="position:relative; z-index:1; margin:15px; 
        top:100px; 
        width:640px; height:640px; 
        background-color:black;
        float:left;"
    >

The SVG tag (line 104):

    <svg  id="svgEa" 
        style="width:100%; height:100%;"
        viewBox="-7500 -7500 15000 15000"
        preserveAspectRatio="xMidYMid meet"
        clip-path="url(#svgEaClip)"
        transform="scale(1.0,1.0)"
        version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- NOTE: All internal units are in KM (or %)  -->

And the embedded Image tag (starting at line 160):

        <g id="gEaAll" transform="scale(1.0,1.0)" >

            <!-- ... -->

            <g id="gEaSurfaceFacingBottom" class="eaSurfaceFacing">
                <g id=gEarthImage>
                    <!-- ...  -->
                    <image x="-6413" y="-6413" width="12826" height="12826" href="eosImages/globe-arctic 8bit.png" />
                </g>
            </g>

The second SVG view is a shadowed (<use..> tag), zoomed view of the first with the same problem.

I have tested this on my PC, on both screens in Chrome, Edge, and IE, where it works correctly on all of them. I have also tested this on my iPhone with both Safari and Edge and my iPad with Safari, Chrome, and Edge with the same failure on all of them. I have tried just a bare <img> tag of the PNG file outside of SVG and that works fine on these platforms.

I do not have any Android platforms to test with, so if anyone wants to try it and let me know, I can add those results here.

I have researched this, and though there's a bunch of stuff about iOS not rendering images, mostly those are a complete failure to render, rather than this very specific partial rendering, and much less specific stuff about SVG differences. Ultimately I didn't find anything that seemed to be the same problem.

To summarize then, my question is: what is causing this problem or what have I done wrong, and how can I fix it? (I do understand that I will need to have a different style/CSS layout for mobile, but I still need to know what needs to be changed to make this render correctly)

Answer 1

Add X and Y coordinates for your <rect /> . In your case, your Clip-Path Rectangle is not in an exact coordinate.

Here is the code working for me

    <clipPath>
         <rect x="-7500px" y="-7500px" width="100%" height="100%" />
    <cliPath>

replace this code with your <clipPath> on line 114 and 301.

Here is the Screenshot

Moreover here is a live demo that worked on my Mac Safari as well in windows Chrome, where I took one part of your code.

Answer 2

Update

Check the answer by @fussionweb.

Orignal answer:
You can try the -webkit- prefix before clip-path . It seems to be a safari issue related to clip-path.