The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the Samsung Internet browser is not displaying the scroll function properly. Any suggestions on how to fix this?

EDIT: Even jQuery's scroll() function is failing to trigger an alert event.

EDIT2: To create a grid layout, each SVG drawing undergoes a dynamic translate().

androidcsssvgoverflowsamsung-internet

Answer №1

After investigating, I have discovered the root cause of this problem:

In my process of dynamically drawing SVG elements, I utilize the transform: translate() property. However, I encountered a limitation on Samsung Internet where using this property did not allow for proper functioning of overflow-x. To address this issue, I had to implement a solution by creating individual wrapper div elements for each SVG element and applying the transformation to the wrapper instead.

Therefore, the revised structure is as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

javascriptjqueryhtmlcssswitch-statement

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

javascripthtmlcssreactjs

Effortless Android JSON Decoding

Hey there, I'm new to android development and trying to figure out how to parse JSON in an android activity without using PHP. Instead, I am utilizing NODEJS on a server in AWS to generate my JSON data. I have a JSON object with values {"1":"Hello", ...

androidjsonparsing

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

CSS: Trouble with elements positioning

I am attempting to position two boxes on top of each other at the bottom of a different div. Here is the code I have: <div style = "height:400px;width:400px;border:1px solid #000;"> <div style = "position:relative;height:100px;width:100px;bor ...

htmlcss

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

Searching for a comprehensive guide to web-related terminology that is widely accepted

Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...

phphtmlcssprogramming-languages

What is the best way to maintain whitespace in CSS while disregarding line breaks?

The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...

htmlcss

When utilizing gridView, the ExecuteReader method will throw an error if the CommandText property has not been

I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...

c#htmlcssasp.net

EliminateCanary purify HPROF documents

I've recently implemented LeakCanary in my project to identify memory leaks. It utilizes HAHA to generate hprof files for leak detection. However, each time I run the app from Android Studio, it initiates the dumping process and produces a new hprof ...

androidmemory-leaksleakcanaryhprof

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality! My current approach involves setting the parent as relat ...

javascripthtmlcss

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

Utilizing Appium Inspector to Locate the Xpath of Elements within an Android App on an Actual Device

Just beginning my journey with appium as a tool. Currently using appium in conjunction with selenium Webdriver (utilizing JAVA) on Mavericks OS. Successfully completed the setup for appium and even ran a sample testcase for an android calculator app afte ...

androidseleniumxpathwebdriverappium

The children elements inside a parent div with Flexbox are now taking on the height of their container

I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller ...

htmlcssinternet-explorerflexbox

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() ...

javascriptjquerycssscroll

Having trouble with SpannableString setSpan function?

Currently, I am attempting to assign distinct colors for certain elements of my text. str.append(" ").append(isBlue ? "b" : "p"); SpannableString spannable = new SpannableString(str); spannable.setSpan(new ForegroundCol ...

androidspannablestringspannable

How can I show the real width of an image on a mobile device?

I have integrated the infinite slide plugin from jQueryscript.net into my website. While it works perfectly on desktop with background images, I am facing an issue on mobile devices where the image width needs to be displayed in full. I attempted to adjust ...

javascriptjqueryhtmlcssmedia-queries

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

htmlcss