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>