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

Using media queries in CSS to create responsive designs

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" /&g ...

htmlcssmedia-queries

Div elements containing identical content and styled in the same manner exhibit distinct dashed borders

After designing a pen with a unique twist, you'll notice that the first div has a border-bottom, while the second has a border-top. What's interesting is that the border on the second div is not the same as the first. Visit this link to see for ...

htmlcssfirefox

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

htmlcss

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

- Prefixing with -webkit-transform and overlooking z-index

When using Safari 5.1.7 on Windows, I noticed that some rotated elements are overlapping others: However, when I test it on Firefox, Chrome, and IE, the issue doesn't occur: Is there a solution to prevent this overlap problem specifically on Safari? ...

htmlcsssafaritransform

Positioning of a paper-dialog in Polymer

I'm currently utilizing polymer's paper-dialog element in my application. While the dialog is always centered by default, I am looking to establish a minimum distance between the dialog and the right side of the window. This way, as the window re ...

htmlcssdompolymer

Guide to uploading a file with JSON Data using the RoboSpice Google Http Java Client module

I have integrated the RoboSpice Google Http Java Client module successfully for executing a POST request with JSON data. Issue : I am facing difficulty in attaching byte[] data to the POST request using the RoboSpice Google Http Java Client module. Belo ...

javaandroidjsonrobospicegoogle-http-client

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

phpcsscodeigniter

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this function ...

javascripthtmlcss

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

javascriptcssreactjswebsass

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the butt ...

cssvue.jsvuetify.js

The lengthy string is not breaking into separate lines as expected in Internet Explorer

My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...

css

Implementing dynamic styles for a checked mat-button-toggle in Angular 6

How can I customize my button-toggle when it is checked? The current code I have doesn't seem to be working... This is the code snippet: <mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}"> <mat-bu ...

htmlcssangulardynamicstyles

My website footer is falling short and not reaching the bottom of the page

I've encountered an issue where my footer is not extending all the way down the website, despite trying various solutions. Here's what I attempted: I used the following CSS properties: min-height: 100%; max-height: 100%; I included these prope ...

htmlcsstwitter-bootstrapfooter

Utilizing media queries in AMP for optimizing mobile website performance

Recently, I delved into the realm of utilizing AMP for my blog. After perusing the documentation and observing examples of its application, I must say that anything enhancing performance is a welcome addition to me. Therefore, I am keen on incorporating i ...

htmlcssamp-html

Is it possible to stack images on top of each other on a webpage?

I'm looking to create a dress-up game website where users can click on different accessories to layer them on top of each other. It's a bit tricky to explain, but I've found some examples that demonstrate what I have in mind: This site is ...

jqueryhtmlcssflashimage