In my web application, I am utilizing Scala.js and d3.js (scala-js-d3) to generate an SVG. However, I have encountered a problem with the background image not triggering the load event when using Chrome on iOS (iPhone), even though it works fine on Windows.
This is how I insert the background image:
d3.select("#backgroundImg")
.append("image")
.attr("id", "graphBackgroundImage")
.attr("width", "1954px")
.attr("height", "1532px")
.attr("xlink:href", "img/maps/map.png")
// TODO this load event does not trigger on iOS!
.on("load", (_: EventTarget) => { println("image loaded") } : Unit)
.on("error", (_: EventTarget) => { prinltn("an error has occurred") } : Unit)
When tested on Windows, the above code generates the following svg dom element (and all functions as expected):
<g id="backgroundImg">
<image id="graphBackgroundImage" width="1954px" height="1532px" xlink:href="img/maps/map.png"></image>
</g>
Debugging on iPhone has proven challenging, but I have observed that the message image loaded is not logged when using Chrome on iOS (and there are no an error has occurred logs either).