すべてのブラウザーで発生する、CSS に関する奇妙なシナリオがあります。
新しい画像が表示されると、CSS で指定された最小幅/最小高さのサイズを使用して表示されることがあります。ブラウザーのサイズを変更する (角をドラッグする) だけで、問題はなくなり、画像は完全な正しい解像度で正しく表示されます。実際、これは毎回発生するわけではありません。画像が最初に表示されたときに、約 5 ～ 10% の確率で発生します。たとえば、ブラウザのキャッシュをクリアしてからリロードすると、問題がより一般的になります。
「自然な」解像度の代わりに最小の幅/高さ (10px) が適用されていることを示す Chrome 要素パネルの写真を次に示します。
そして、実際に画面に表示されるのは次のとおりです。
画像の境界線は、CSS を介して適用されています...
.streamifiedPostImageContainer {
margin-top: 5px;
overflow: hidden;
width: 100%;
}
.streamifiedPostImage {
float: left;
margin-right: 8px;
max-width: 100%;
}
.streamifiedPostImage img {
border: 3px solid #FFF;
max-width: 100%;
max-height: 100%;
min-width: 10px;
min-height: 10px;
box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .3);
}
要素パネルを使用して、すべてのスタイルを調べました。要素パネルには「計算された」サイズが 10x10px で表示されますが、すべての「スタイル」は CSS (上記) と適切に一致しますが、(適切な) 画像の幅/高さではなく最小の幅/高さを使用する理由は示されていません。 .
繰り返しますが、最も奇妙なことは、ブラウザの隅をドラッグするか、ページをリロードするだけで、これが自動的に修正されることです. キャッシュされている画像と適用されている CSS の間にある種の競合状態があるようです。これは約 5 ～ 10% の時間でしか発生しないためですが、すべてのブラウザーで発生します。