Bootstrap 3.3.7 .Img-thumbnail border使图像在手机上消失

Question

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

有问题的图片是徽标图片的精灵。所以，你们可以看到我的意思，我已经在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>

以下是我的三星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上运行。只是看起来是Samsung Galaxy S5上的Chrome和Samsung Galaxy S6上的默认浏览器的问题。

点击“请求桌面版网站”＆＃39;使它工作相应。但是，否则不会。为什么会这样？

尝试过很多设备。包括在S6上的铬无济于事。清除缓存将在首次加载时显示背景颜色，然后在以后显示为空白。

尝试使用不同的图像并且有效。它不会使用的图像是一个200像素宽，7200像素高的精灵图像，它将使用的图像是208像素宽，2,080高的图像。但是第一个图像去除边框css使它工作。发生了什么事？

更新21/03/17

我已经更新了添加各种尺寸图像的codepen，如果你仔细观察它会出现一个模式，超过4096像素高度的图像将不会显示.img-thumbnail类。内嵌最大支持的镀铬移动浏览器图像尺寸为4096像素。

  

因此，我可以将原始的精灵图像分割成两三个较小的图像而不是达到阈值，但我想知道   边界在这个问题上有什么相关性。为什么   从img-thumbnail删除边框使其工作？即使是   精灵大小高于最大值？

Answer 1

在互联网上寻找其他地方我在git pull（html5gamedevs.com/topic/14319-sprite-sheet-maximum-size‌）上找到以下链接

  

纹理有最大尺寸..

它引用了gt-sm '(min-width: 960px)' （webglstats.com/webgl2/parameter/…）。我想知道是否为图像添加边框可能会迫使浏览器使用限制为4096像素的渲染组件（如WebGL）？