Search code examples
androidcsssvgoverflowsamsung-internet

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

I have a div container horizontally filled up with a set of SVG drawings which are drawn dynamically. Because the width of the container exceeds the window's width an overflow-x: scroll !important is applied. However, even though it works in most of the browsers, the Samsung Internet browser won't make the div scrollable. Is there anything I can do about it?

EDIT: jQuery's scroll() function won't fire an alert event either

EDIT2: I perform a dynamic translate() on each SVG drawing to arrange them into a grid layout

Solution

  • I found out the reason for this issue:

    As I said I am drawing the SVG elements dynamically. I also transform: translate() them. But this won't make the overflow-x working on Samsung Internet. Instead, I had to create a wrapper div for each svg drawing and translate this wrapper rather than the svg itself.

    So instead of this structure:

    <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>

    I need this structure:

    <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>