Safari uses wrong background-images

Question

paul.sch OP

Created Jan ’16

Replies 1

Boosts 0

Views 3.2k

Participants 2

---- please see the update at the bottom! ----

Hi!

I have a website where safari on iPhone uses the wrong background-images occasionally
the problem occurs not always, but most of the time. It seems "random" which pages/images are affected
the site is frame-based, which might or might not be relevant for the problem. I know frames are outdated and horrible, the site is very old, PLEASE no frames-discussion. I failed to google the problem, so I thought it MIGHT be connected with the frames that are seldom used.
no other browsers have this problem. Even safari on PC doesn't.

Here are examples: (I guess it is obvious that the crazy patterns are wrong -- there is background-image, but a different image)

example 1:

URL: http://www.baubook.at/vlbg/

Image with problem: http://www.eigelb.at/forum/bb/safari1.png

example 2:

URL: http://www.baubook.at/ktn/

Image with problem: http://www.eigelb.at/forum/bb/safari2.png

Any ideas anyone?

Paul

----- EDIT -----

I now detect the safari/iphone-user-agent with PHP and add some CSS that disables the offending background-images.

Those users will have to live with a simnple color as a workaround.

Therefore you will not be able to reproduce the error with the above URLs.

However, I am still curious for information concerning this problem.

Boost

Answer 1

Grandcross OP

Jan ’16

Do you use the css file?

If you use it, you set this.

body { background-image: url(filename.png); background-attachment: fixed; background-repeat: repeat-y; background-position: center top; }

p1 { color: #ff00ff; font-size: 40px; font-family: "HG行書体"; }

p2 { color: #99ffff; font-size: 30px; text-shadow: 2px 2px 2px #ffffff; }

a.link { color: #ffff00; font-size: 40px; background-color: #000080; }

a.visited { color: #ff0000; font-size: 40px; background-color: #ff00ff; }

a.hover { color: #ffffff; font-size: 50px; background-color: #000000; }

a.activ { color: #008000; font-size: 40px; background-color: #ccffcc; }

div.sample1 { position: relative; width: auto; height: auto; margin-top: 340px; margin-left: 50px; background -webkit-radial-gradient(circle,#99ffff,#000000);

background: -moz-radial-gradient(circle,#99ffff,#000000);

background: radial-gradient(circle,#99ffff,#000000); }

div.sample2 { position:relative width: 480; height: 320px; float: right; background-image: url(filename2.jpg); margin 2em; }

div.box1 { position: relative; width: 480px; height: 320px; }

span.guard { position: absolute; width: 100%; height: 100% background-color: rgba(255,255,255,0.0); }

h1 { color: #000000; font-size: 70px; background-color: #99ffff; }

table { border: 4px #ffff00; solid; width: 25%;text-align: center; }

th { border: 4px #ff0000 solid; padding: 1em; }

td { border: 4px; #008000 solid; padding: 1em; }

.redback { background-color: #ff0000; }

.greenback { background-color: #008000; }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<body>

<h1>a letter</h1><br>

<p1>a letter</p1><br>

<a href="url.html" target="_parent">link by submit</a><br>

</div>

<table>

<tr><th>title</th><td>a letter</td><td class="redback"><a href="url.html" target="_top">submit</a></td></tr>

<tr><th>title</th><td>a letter</td><td class="greenback"><a href="url.html" target="_top">submit</a></td></tr>

<tr><th>title</th><td>

<img src="filename.png" width="480px" height="320px" alt="description of picture" oncontextmenu="return false"></div></td><td>a letter</td></tr>

</table>

</div>

<h2>a letter</h2><br>

<p2>a letter</p2><br>

</body>

</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

It's asimple css(upside) and html5(downside).

So many of method can be in css.

Let's try it !.

0