css3 box-shadow https vs http

Question

Я столкнулся с чем-то особенным сегодня в отношении вложенных теней и https vs http.

Использование Chrome (версия 37.0.2062.120 m), если я накладываю теневую рамку в img, она работает нормально, пока URL-адрес img http (пример: http://somebodyelseswebsite.com/myimage.png). Если это изображение использует https (пример: https://thisotherguyswebsite.com/hisimage.png), теневая тень вставки не появится.

Является ли проблема с безопасностью или может быть ошибка/недосмотр Google? У кого-нибудь есть мысли?

<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/

Answer 1

Http или Https не проблема, увидеть это:

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

Я называю это двумя способами:

<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 и Https то же изображение, и я вижу коробку-тень. Проблема в том, что первое изображение имеет белый фон, а второе изображение имеет прозрачный фон. Таким образом, вы видите коробку-тень во втором изображении, но не в первом из-за белого фона.

Посмотрите, что первое изображение, которое я назвал двумя способами Http и Https, в первом с box-shadow: inset, а второй - не вставкой, и он отлично работал. Вы просто не видите вставную тень из-за белого фона изображения.

UPDATE

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

Я установил цвет фона через div, содержащие изображения, так что вы можете увидеть на фоне изображения. Первый имеет белый цвет фона, а второй - прозрачный. Помните, что в изображениях PNG вы можете иметь прозрачные цвета фона, в то время как в изображениях JPEG вы не можете.

UPDATE

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

Я включил обходной путь, чтобы установить box-shadow: inset в изображении с фоновым цветом, отличным чем прозрачным. Я завернул его в div и установил z-index: -1 на ваше изображение, так что div впереди. Обратите внимание, что position: relative важен, поскольку свойство z-index применяется только к расположенным элементам, то есть relative, absolute и fixed. Не применяется к элементам static (который по умолчанию используется).