I am currently working on an app that is temporarily hosted here.
After testing in Chrome, everything seems to be functioning correctly. However, when I switch to Safari, the background image fails to display.
The relevant code looks fairly simple:
<html>
<head>
<link rel="apple-touch-icon" href="_images/favicon.png">
<script type="text/javascript" src="arc.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script>
<style>
body{
background-image: url('_images/background.png');
background-size: cover;
}
</style>
</body>
</html>
It seems like a straightforward property according to the documentation found here:
https://css-tricks.com/almanac/properties/b/background-size/
I have managed to get Safari to work by removing the line:
background-size: cover;
However, this does not provide me with the desired effect of covering the background entirely.
Further testing indicates that using the value "contain" also causes issues.
Even setting a specific value like 400px results in the same problem. It appears that Safari may not accept any values for this property.