Chrome中多背景图片定位失效问题求助（Bootstrap实现）

问题描述 #

基于Bootstrap实现同一元素显示多张背景图片，代码如下：

HTML代码 #

<a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a>

CSS代码 #

.list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x);
   background-position-y: center;
}

该效果在Safari中显示符合预期，但Google Chrome中无法正常渲染。

Safari显示效果

Chrome显示效果

问题原因 #

Chrome对拆分的background-position-x/background-position-y多值语法存在兼容性问题。虽然CSS规范允许拆分属性并为多张背景图指定不同的x/y位置，但Chrome在解析这种写法时无法正确识别多张背景图的位置对应关系，导致渲染异常。而Safari对该语法的支持更为完善。

解决方案 #

改用完整的background-position属性，为每张背景图明确指定完整的x和y位置，替代拆分的x/y属性写法：

.list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center;
}

修改后，Chrome和Safari均可正确解析多张背景图的位置，实现预期显示效果。

内容的提问来源于stack exchange，提问作者Tim Nikischin