子像素渲染时如何让图片/视频填满容器？解决尺寸舍入差异

我们在实际开发中碰到了一个浏览器渲染的异常状况，整理出的细节如下：

问题现象 #

当用百分比单位定位或设置图片、视频这类媒体元素的尺寸时，部分浏览器会对媒体内容的尺寸做舍入计算，但这个舍入逻辑和容器DOM元素的尺寸舍入规则不一样，最终导致媒体元素没法完全填满容器，出现细微的缝隙或留白。

涉及场景 #

目前观察到该问题出现在两种场景：

• HTML5 <video> 元素
• 设置了 background-size: contain 属性的 <div> 背景图

测试环境 #

这个问题已在以下环境中被确认：

• macOS Sierra 系统下的 Chrome 64.0
• Windows 系统的 Chrome 浏览器（多个版本均反馈存在相同问题）

当前状态 #

目前我们还没确定有效的修复方案，正在进一步分析浏览器渲染引擎中容器与媒体元素的尺寸舍入逻辑差异。

内容的提问来源于stack exchange，提问作者Jeremy Thomerson