html - Bootstrap 3.3.7 .Image-thumbnail border 使图片在手机上消失

Question

我有一个相当奇怪的问题，即在 bootstrap 中添加到 img-thumbnail 类的 1px 边框使我的图像在手机上消失。删除这个我的图像看起来很好。另外，如果我尝试使用较小尺寸的图像，它也能正常工作。

有问题的图像是 Logo 图像的 Sprite 。所以，你们可以明白我的意思，我已经在 codepen 上重现了这个问题:

Codepen of issue

html代码:

<div class="col-xs-12 midxssm col-sm-4 col-md-2"><img class="img-18001 img-circle img-responsive img-thumbnail" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwYEAAAAAw6D5U1/hAFUBAAAAAHwGFFAAAcRa5isAAAAASUVORK5CYII="></div>

这是我的 Samsung Galaxy s5 的屏幕截图，显示图像不显示的原因:

Bootstrap 3.3.7 img-thumbnail CSS:

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}

更新:

经过更多调试后，这在使用 safari 浏览器的 Iphone 5s 和使用默认浏览器的 Samsung Galaxy S5 上有效。三星 Galaxy S5 上的 Chrome 浏览器和三星 Galaxy S6 上的默认浏览器看起来只是一个问题。

单击“请求桌面站点”使其相应地工作。但是，否则不会。为什么会这样？

在许多设备上试用过。在 S6 上包括 chrome 无济于事。清除缓存将在第一次加载时显示背景颜色，然后返回空白白色。

尝试使用不同的图片，效果很好。它不能使用的图像是 200px 宽 x 7200px 高的 Sprite 图像，它可以使用的图像是 208px 宽 x 2,080 高的图像。但是第一张图片删除边框 css 使它工作。这是怎么回事？

21/03/17 更新

我已经更新了代码笔，添加了各种尺寸的图像，如果你仔细查看它，就会出现一个模式，即 .img-thumbnail 类将不会显示超过 4096 像素高度的图像。符合 4096 像素的最大受支持 chrome 移动浏览器图像尺寸。

I could therefore split my original sprite image into two or three smaller images and not hit the threshold, but I would like to know what correlation does the border have regarding this issue. Why does removing the border from img-thumbnail make it work ? even if the sprite size is above maximum ?

Answer 1

在互联网上的其他地方，我在 HTML 5 游戏开发网站( html5gamedevs.com/topic/14319-sprite-sheet-maximum-size‌ ) 上找到了以下链接

there are maximum sizes to textures..

它引用了 WebGL Stats 站点 ( webglstats.com/webgl2/parameter/… )。我想知道为您的图像添加边框是否会强制浏览器使用限制为 4096 像素的渲染组件(例如 WebGL)？