CODEWITHSUNDEEP
csshttphttps
Shazboticus S Shazbot
Shazboticus S Shazbot

Reputation: 1289

css3 box-shadow https vs http

I ran across something peculiar today regarding inset box-shadows and https vs http.

Using Chrome (Version 37.0.2062.120 m), if I do an inset box-shadow on an img, it works just fine so long as that img's URL is http (example: http://somebodyelseswebsite.com/myimage.png). If that image is using https (example: https://thisotherguyswebsite.com/hisimage.png), the inset drop-shadow will not show up.

Is it a security issue or perhaps a bug/oversight by Google? Anyone have any thoughts?

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://kfscdn.api.np.km.playstation.net/64924751177e14943eec338b1f02cb08a838321c2ed38d0dc546622311399dc5/48b8a11c7d5f31a1efd874e197d0e1b9/1410306322100.png"></img>
<br>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

http://jsfiddle.net/9TMdc/4/

Upvotes: 0

Views: 63

Answers (1)

Carlos Calla
Carlos Calla

Reputation: 6706

Http or Https is not the problem, see this:

http://jsfiddle.net/carloscalla/9TMdc/6/

I am calling it the two ways:

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>

Http and Https the same image and I see the box-shadow. The problem is that the first image have white background and the second image has background transparent. So you see the box-shadow in the second image but not in the first one because of the white background.

See that the first image I called it the two ways Http and Https, in the first one with box-shadow: inset and the second one not inset and it worked fine. You just dont see the inset shadow because of the white background of the image.

UPDATE

http://jsfiddle.net/carloscalla/9TMdc/9/

I set a background-color in a div containing your images so you can see the background of your images. The first one has a background color white and the second one is transparent. Remember that in PNG images you can have transparent background colors while in JPEG images you can't.

UPDATE

http://jsfiddle.net/carloscalla/9TMdc/10/

I included a workaround to set the box-shadow: inset in your image with background color different than transparent. I wrapped it in a div and set the z-index: -1 to your image so the div comes in front. Notice that position: relative is important because z-index property only applies to positioned elements, that means relative, absolute and fixed. Does not apply to static elements (which comes by default).

Upvotes: 1

Related Questions