Html Bootstrap 3.3.7.Img缩略图边框使图像显示在手机上

我有一个相当奇怪的问题，在bootstrap中添加到img缩略图类的1px边框使我的图像在手机上消失。移除这个 我的形象看起来很好。另外，如果我尝试使用较小尺寸的图像，它也可以工作

所讨论的图像是徽标图像的精灵。所以，你们可以明白我的意思，我在codepen上重新创建了这个问题：

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>

更新：

经过更多的调试，这在使用safari浏览器的Iphone 5s和使用默认浏览器的三星Galaxy S5上都能正常工作。三星Galaxy S5上的Chrome和三星Galaxy S6上的默认浏览器似乎存在问题

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

在许多设备上试用过。在S6上添加铬元素无效。清除缓存将在第一次加载时显示背景色，然后在以后返回空白白色

尝试使用不同的图像，效果很好。它将不处理的图像是一个200px宽7200px高的sprite图像，而它将处理的图像是一个208px宽2080高的图像。但是，随着第一幅图像的删除，css使其工作起来。发生了什么事

2017年3月21日更新

我已经更新了代码笔，添加了各种尺寸的图像，如果您仔细查看，就会发现一种模式，超过4096像素高度的图像将不会显示在.img缩略图类中。与支持的最大chrome移动浏览器图像尺寸4096像素一致

因此，我可以将原始的sprite图像分割为两到三个较小的图像，并且不会达到阈值，但我想知道 边界在这个问题上有什么关联。为什么 从img缩略图中删除边框是否有效？即使 精灵大小超过最大值？

---

在互联网上的其他地方，我在一个

HTML5游戏开发网站上找到了以下链接

(​)

纹理有最大尺寸

---

它引用了

WebGL Stats站点

（）。我想知道在图像中添加边框是否会迫使浏览器使用渲染组件（例如WebGL）这仅限于4096px？

我无法复制该问题。我可以在较低的宽度上看到图像。@hunzaboy在其他设备上测试时效果良好，在手机上测试时效果突出我在iphone 5s上测试safari时效果良好。但是，在使用chrome的三星Galaxy s5上，它不太可能是i我已经在评论中回复了你的评论，这是一个直接版本的this@VaishalPatel其想法是评论可能是暂时的——它们可能被删除或移动到聊天室，这是“答案”的副本评论。我已将答案设置为社区维基，因此我不会从中获得代表。请随意添加更多内容。我目前正在阅读所有内容。我怀疑边框会导致重新调整大小，从而导致重新绘制。目前还不确定

.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}