Webkit scrollLeft + CSS翻译水平bug

Question

我有一个DOM结构，如：

<div class="container">
    <div class="content"></div>
</div>

Container是一个样式为overflow:scroll的可滚动元素。内容已指定宽度和高度。

具体情况（可能是webkit bug）

当最右侧滚动Container（内容的可见右边框）并在内容元素上应用transform: translateX(-100px)时，不同浏览器的行为会有所不同（请参阅结果）。

结果

• Firefox / Opera / Edge：内容翻译100px左侧。容器的可见背景。
• Webkit / Chrome：内容根本没有翻译。容器的背景不可见。水平滚动宽度已更改。

可以做些什么来实现规范化结果，即翻译内容和容器的可见背景？（如Firefox / Opera / Edge）

JSFiddle

＆＃13;

＆＃13;

 const container = document.getElementsByClassName('container')[0];
 const content = document.getElementsByClassName('content')[0];
 container.scrollLeft = 1400;
 content.style.transform = 'translateX(-100px)';

＆＃13;

.container {
	width: 300px;
	height: 300px;
	background-color: gray;
	left: calc(50% - 200px);
	top: calc(50% - 150px);
	overflow: scroll;
	position: relative;
}

.content {
	width: 1400px;
	height: 1400px;
	background: radial-gradient(at center center, red 0%, lightgreen 100%);
}

＆＃13;

<div class="container">
<div class="content"></div>
</div>

＆＃13;

＆＃13;

＆＃13;