Chrome 180度旋转容器下iframe触摸滑动反向问题如何修复？

可行解决方案如下 #

1. CSS调整方案（同域iframe最优解）

如果你的iframe和主站同域，可直接用双层旋转抵消变换对触摸坐标的影响，最终视觉效果和原实现完全一致，不需要修改业务逻辑：

• 给外层旋转容器保留原有transform: rotate(180deg);属性
• 给iframe元素本身以及iframe内部的html根元素都添加transform: rotate(180deg);属性
  两次180度旋转叠加等于360度，触摸事件的坐标计算会被两层变换抵消，滑动方向自动恢复正常。

2. Chromium/Electron配置方案

如果是Electron环境或者可以调整Chromium启动参数，直接添加启动flag即可修复内核层面的坐标计算问题：

• 启动参数添加--enable-features=TouchpadAndWheelEventTransform，该flag从Chromium 98版本开始正式支持，专门用于修复变换容器下触摸、滚轮事件坐标不跟随transform计算的缺陷。

3. JS兜底方案（兼容跨域iframe场景）

如果是跨域iframe无法修改内部样式，可通过手动拦截触摸事件控制滚动：

• 给外层旋转容器监听触摸事件，拦截默认行为，将滑动偏移量反向后控制iframe滚动，示例代码如下：

const iframeWrapper = document.querySelector('.iframe-wrapper')
const targetIframe = document.querySelector('iframe')
let startTouchY = 0
let initialScrollTop = 0

iframeWrapper.addEventListener('touchstart', (e) => {
  startTouchY = e.touches[0].clientY
  // 同域iframe直接读取滚动位置，跨域可通过postMessage从iframe内部获取
  initialScrollTop = targetIframe.contentWindow.document.documentElement.scrollTop
}, { passive: false })

iframeWrapper.addEventListener('touchmove', (e) => {
  e.preventDefault()
  const moveDelta = e.touches[0].clientY - startTouchY
  // 偏移量反向匹配旋转后的滑动逻辑
  // 同域直接控制滚动，跨域可通过postMessage通知iframe内部执行滚动
  targetIframe.contentWindow.scrollTo(0, initialScrollTop + moveDelta)
}, { passive: false })

跨域场景下只要iframe内部配合监听postMessage消息执行对应的滚动操作即可正常工作。

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