Safari is blurring an image - WHY?

[confused and dazed]

Hello Internet,

 

I'm having an issue with how Safari is rendering a picture on my smartphone - but not chrome. Any thoughts on why this is happening?

 

Please attached image.

[Ingolme]

Where did that picture come from? It looks kind of like some of the data is corrupt.

[confused and dazed]

What's strange is that Safari is the only browser that is doing that... why would that be?

I created the image in Microsoft Excel and saved it as a png in a picture editor I use. I like Microsoft excel's shapes and effects so I tend to create images copy them and paste them into a picture editor to finish it up and save it as a png.

I placed the image as a button background using a class callout referencing a remote CSS file - code below. I have never had an issue like this and I have used this technique for the past several years.

 

Source Code:

<div class='sb1'>

<input type='button' name='submitb' class='b1' value='Begin Scoring' id='submitb' onClick='check();'>

</div>

 

CSS remote Code:

.sb1 {

width:200px;

height:45px;

position:absolute;

margin-left:30px;

margin-top:30px;

background: url(b3.png);

border: 0px solid black;}

.b1 {

width:200px;

height:40px;

position:absolute;

margin-top:2px;

background-color:transparent;

font-size:12pt;

font-family:Calibri;

color:#ffffff

border: 0px solid black;}

[dsonesuk]

Looks corrupted to me, looks like miniature image of actual spreadsheet added at bottom, try recreating it, and use decent graphic editor program, GIMP is free, not MS picture editor.