CSS transform: scale在iPhone7、8等旧款机型上失效问题求助

问题背景 #

我运营的网站55carats.com，页脚前的最后一个板块是通过主题CSS自定义WordPress插件实现的Instagram帖子展示区。该板块针对移动端做了响应式设计，是仅支持点击切换、不支持滑动的带箭头滑块，正常显示时箭头应位于图片两侧。

问题现象 #

在旧款iPhone（如搭载iOS13.1的iPhone8）上，transform: scale(68%)属性无法生效，箭头停留在图片顶部；但iPhone13上显示完全正常。我确认iOS13.1的Safari理论上完全支持该属性，因此排除基础兼容性问题。

已尝试的解决措施 #

• 为transform属性添加了-webkit-、-moz-等全浏览器前缀
• 给父元素设置了固定像素高度，尝试解决Safari可能因容器无固定高度无法缩放的问题
  以上操作均未解决问题。

相关CSS代码 #

.sbi_item {
    height: 100%;
    -webkit-transform: scale(68%);
    -moz-transform: scale(68%);
    -ms-transform: scale(68%);
    -o-transform: scale(68%);
    transform: scale(68%);
}

烦请帮忙排查问题根源，给出可行的解决思路，感谢！

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