Rendering SVG graphics on browsers for Android devices

I've been struggling with an issue for quite some time now and I can't seem to find a solution.

The problem lies in having an SVG image as a CSS background on the top left corner of a div. Instead of seamlessly merging with the div background, it creates thin borders around the rendered graphics. Interestingly, this issue only occurs on Android stock browser, Chrome for Android, and Firefox for Android, while working perfectly fine on desktop browsers such as Chrome, Firefox, and Opera.

For reference, here is a small test case: http://jsfiddle.net/SDJHA/1/ (the SVG code can be found in the JavaScript frame as a comment)

The CSS code used is as follows:

.cont{ background-color : #7AC943; width : 300px; height : 300px; }

.elementOne{
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%237AC943%22%20points%3D%22100%2C100%20100%2C0%200%2C100%20%22%2F%3E%3C%2Fsvg%3E");
    width : 100px; height: 100px;
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-color : white;
}

The HTML structure should look like this: 

<div class="cont"><div class="elementOne"></div></div>

It appears to be a bug related to the android svg rendering engine possibly miscalculating subpixels... I'm not entirely sure.

This issue was identified during testing on both an Asus Transformer and HTC One devices.

If anyone has any advice or insights on how to solve this problem, it would be greatly appreciated!

Thank you!

androidhtmlcsssvg

Answer №1

It appears that the appearance of lines is a result of combining the two sections on the page. The corner, being opaque, attempts to cover the larger div, creating some edge anti-aliasing effects.

This effect could likely be replicated if the svg were replaced with a png of identical size and applied in the same manner.

One potential solution could involve using a single background svg image to outline the desired shape, thus simplifying the process by utilizing the larger div as a container with a background image.

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

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

Issue with Error in Expanding Label in Material-Ui using React

I have managed to increase the size of the Label in the TextField component of my React application. However, I am encountering an issue where it overlaps some text on its right when it shrinks. Here is the link for reference import React from "react ...

cssreactjsmaterial-uijss

It is not possible to trigger an input click programmatically on iOS versions older than 12

Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...

javascriptcssiosmobile-safarireact-dropzone

Tips on overriding the outline:none property in CSS

Is there a way to overwrite the 'outline: none' property in CSS? I have a parent class that has this property set, but I want to remove it in the child class. ...

htmlcss

What is the best way to locate and extract the content of an HTML element using XPath in Selenium with VBA?

I am currently seeking a solution to extract the content of an element with the name "data-testid" from a website. This specific element appears approximately 35 times within various contexts in the HTML code. The particular element I am interested in look ...

htmlvbaseleniumxpath

Guide to displaying or hiding elements based on the number of selected checkboxes

When only one checkbox is checked, all buttons in the head-btn class should be displayed. By default, only the add folder and upload buttons are shown. If a user selects two checkboxes, the share button should be hidden. If they uncheck one of the checkbo ...

javascriptjqueryhtmlcheckbox

Implement a grid layout for columns within the profile section

Each user on my website has a profile tab that displays their submitted posts. To showcase these posts, I utilize the following code: <?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop-> ...

phphtmlcss

Is it possible to retrieve the IMEI number of a mobile phone using expo?

Currently working on developing a mobile app with React Native using Expo. I need to figure out a way to access the client's mobile IMEI number and display it in the front end of the app. Unsure of how to accomplish this task. Is there a method to do ...

javascriptandroidnode.jsreact-nativeexpo

Select a random class from an array of classes in JavaScript

I have a collection of Classes: possibleEnemies: [ Slime, (currently only one available) ], I am trying to randomly pick one of them and assign it to a variable like this (all classes are derived from the Enemy class): this.enemy = new this.possibleEn ...

javascripthtmltypescriptvue.jsclass

What is the best way to ensure that table cells containing images resize without any issues?

I need help with centering and resizing an image on a screen. The image is divided into small images within cells, but I can't seem to get it right. Despite trying various solutions and spending hours resizing the table and images, the final output a ...

htmlcsshtml-table

Is there a way to position a ListItem (using React) in the lower left corner in this specific case?

import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/Ap ...

cssreactjsmaterial-ui

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

htmlcss

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Step-by-step guide: Uploading and retrieving large image blobs in Java to MySQL database with PHP

I've been working on a project that involves uploading images to a database and then retrieving them from the same database. Specifically, I need to upload an image from an Android device using Java. Here's what I have implemented: Bitmap bitma ...

phpandroidmysqlblob

Looking to retrieve a specific portion of HTML data returned from an AJAX request

Looking to extract specific HTML content from the response received from an ajax call made to the controller. This task will involve utilizing an ID reference. I am encountering difficulty in employing the find function directly on the data as it is curre ...

jqueryhtmlajax

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

jqueryhtml

Is it possible for me to create an HTML script that can transfer data from the script to a cell within Qubole?

Is it possible to create an HTML script that allows user interaction, pass the data back to a zeppelin cell, and trigger a rerun of the data? Thank you! Update: I have made some progress in rerunning the cell with an HTML click. The cell I want to rerun ...

htmlangularapache-zeppelinqubole

I'm struggling to locate the space that should be between these elements

After accidentally starting in quirks mode without declaring a doctype, I realized my mistake and corrected it by declaring a doctype. However, there is a persistent issue with a space between .car-box-img and car-box that I can't seem to locate in t ...

htmlcss

Distributing information to modules made of Polymer

Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...

javascripthtmldata-bindingpolymerweb-component

Aligning Cards using Bulma Styles

Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this projec ...

htmlcssresponsive-designflexboxbulma