1

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

JoeBe
  • 1,224
  • 3
  • 13
  • 28

1 Answers1

1

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>
JoeBe
  • 1,224
  • 3
  • 13
  • 28