Overflow-x: scroll !important 不适用于带有翻译 SVG 的 Samsung Internet

Question

我有一个 div 容器，水平填充了一组动态绘制的 SVG 图形。因为容器的宽度超过了 window 的宽度，所以应用了 overflow-x: scroll !important。然而，即使它适用于大多数浏览器，Samsung Internet 浏览器也不会使 div 可滚动。我能做些什么吗？

编辑：jQuery 的 scroll() 函数也不会触发 alert 事件

EDIT2：我对每个 SVG 绘图执行动态 translate() 以将它们排列成网格布局

Answer 1

我找到了这个问题的原因：

正如我所说，我正在动态绘制 SVG 元素。我也transform: translate()他们。但这不会使 overflow-x 在 Samsung Internet 上运行。相反，我必须为每个 svg 绘图创建一个包装器 div 并翻译这个包装器而不是 svg 本身。

所以不是这个结构：

<div id="big-wrapper">
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  ...
</div>

我需要这个结构：

<div id="big-wrapper">
  <div id="small-wrapper1" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  <div id="small-wrapper2" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  <div id="small-wrapper3" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  ...
</div>

Overflow-x: scroll !important 不适用于带有翻译 SVG 的 Samsung Internet

Overflow-x: scroll !important not working on Samsung Internet with translated SVG's

android

css

svg

overflow

samsung-internet