Bootstrap 3.3.7 .Img-thumbnail边框让图片在手机上消失
Bootstrap 3.3.7 .Img-thumbnail border makes image dissappear on mobile phones
我有一个相当奇怪的问题，bootstrap 中 img-thumbnail class 的 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>
这是我的 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 上的默认浏览器看起来只是一个问题。
单击 'Request desktop site' 使其相应地工作。但是，否则不会。为什么会这样？
已在多种设备上试用。在 S6 上包括 chrome 无济于事。清除缓存将在第一次加载时显示背景颜色，然后返回空白白色。
尝试使用不同的图片，效果很好。它不能使用的图像是 200px 宽 x 7200px 高的精灵图像，它可以使用的图像是 208px 宽 x 2,080 高的图像。但是第一张图片删除边框 css 使它起作用。这是怎么回事？
更新 21/03/17
我已经更新了代码笔，添加了各种尺寸的图像，如果你仔细查看它，就会出现一个模式，即超过 4096 像素高度的图像将不会显示 .img-thumbnail class。符合支持的最大 chrome 移动浏览器图像尺寸 4096 像素。
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 ?
在互联网上的其他地方，我在 HTML 5 Game Dev site(html5gamedevs.com/topic/14319-sprite-sheet-maximum-size )
上找到了以下 link
there are maximum sizes to textures..
它引用了 WebGL Stats site (webglstats.com/webgl2/parameter/…)。我想知道为您的图像添加边框是否会强制浏览器使用限制为 4096px 的渲染组件（例如 WebGL）？
我有一个相当奇怪的问题，bootstrap 中 img-thumbnail class 的 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>
这是我的 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 上的默认浏览器看起来只是一个问题。
单击 'Request desktop site' 使其相应地工作。但是，否则不会。为什么会这样？
已在多种设备上试用。在 S6 上包括 chrome 无济于事。清除缓存将在第一次加载时显示背景颜色，然后返回空白白色。
尝试使用不同的图片，效果很好。它不能使用的图像是 200px 宽 x 7200px 高的精灵图像，它可以使用的图像是 208px 宽 x 2,080 高的图像。但是第一张图片删除边框 css 使它起作用。这是怎么回事？
更新 21/03/17
我已经更新了代码笔，添加了各种尺寸的图像，如果你仔细查看它，就会出现一个模式，即超过 4096 像素高度的图像将不会显示 .img-thumbnail class。符合支持的最大 chrome 移动浏览器图像尺寸 4096 像素。
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 ?
在互联网上的其他地方，我在 HTML 5 Game Dev site(html5gamedevs.com/topic/14319-sprite-sheet-maximum-size )
there are maximum sizes to textures..
它引用了 WebGL Stats site (webglstats.com/webgl2/parameter/…)。我想知道为您的图像添加边框是否会强制浏览器使用限制为 4096px 的渲染组件（例如 WebGL）？