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

Overlap of background in chat messages on Android Firebase

The issue I'm encountering is that the background of chat messages is overlapping when all messages are displayed using FirebaseRecyclerAdapter. Here is the error I'm facing **Below is the code for the MessageCard: <?xml version="1.0" encod ...

androidfirebasefirebase-realtime-databasefirebaseui

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

javascripthtmlcss

Error message: "Link binding error in knockout collection"

In this example, you'll find my Knockout ViewModel. $(document).ready( function () { var Incident = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIn ...

javascripthtmlmvvmknockout.js

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

htmlcsscss-positioncss-transforms

Developing a system mode called "night mode"

I've decided to incorporate a dark mode feature into my Wordpress theme. Creating both dark and light modes was a breeze, but now I want to add a third mode that serves as the default for pages. This new mode will automatically switch between dark a ...

javascripthtmljquerycss

Adjusting the height of the v-footer

I'm having trouble adjusting the height of the v-footer component. According to the documentation, I should be able to use the height prop, but when I try height="100px" or height="50%", the footer doesn't change. What could be causing this issue ...

cssvue.jsvuetify.jsfooter

Steps to connect two drop-down menus and establish a starting value for both

In the scope, I have a map called $scope.graphEventsAndFields. Each object inside this map is structured like so: {'event_name': ['field1', 'field2', ...]} (where the key represents an event name and the value is an array of f ...

javascripthtmlangularjsbindingcontroller

What could be the reason my foreach loop is not being run?

After creating a login form that successfully grants access upon entering the correct email and password, there seems to be an issue. A foreach loop is implemented to test all results, with the assumption of only one account existing. foreach ($result as ...

phphtmlsqlsessionforeach

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

My web page has an embedded PDF file within the content. <h3>Foo</h3> <object id="foo" data="bigboundingbox.pdf" type="application/pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object> When viewed in Interne ...

htmlinternet-explorerpdfwebprinting

What are the steps to create a build for an Android mobile device?

After successfully installing PhoneGap on my Mac and selecting a PhoneGap project template using Xcode, I am now wondering how to deploy the application on an Android device. Do I need to set up Eclipse and reinstall the PhoneGap SDK? Is it possible to d ...

androidiphonecordova

Issue accessing image file located outside of script directory

Issue: Difficulty synchronizing images between 2 folders I have a project with 2 image directories: Home/user/public_html/image Home/user/m.fruit.com/image The public_html folder is for the desktop version of the site The m.fruit.com folder serves the ...

phphtml

Navigating Dynamically between tabs - A How-to Guide

I am working on a mat-tab Angular app where I need to dynamically generate links and transfer them to a navLinks object. Despite ensuring that the concatenation is correct, it seems like my approach is not working as expected. Here's a glimpse of what ...

javascripthtmlangulartypescript

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

htmlcssbootstrap-5navbar

Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this: <ul> <li id="projectrow_364"> <span>Forest</span> </li> <li id="projectrow_365"> <span>Life</span> ...

jquerycss

Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result. Here is what I currently have: ...

csstwitter-bootstrapbutton

Is there a way to position labels above their corresponding elements using this customized input style?

My CSS for styled inputs has become too complex, making it difficult to remove and fix certain elements. Specifically, I am facing issues in getting labels positioned above my input fields, select options, and output section. /* Cus ...

htmlinputlabelbootstrap-5

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

javascriptjqueryhtmlcss

What is the solution for addressing the size problem of the image within the modal?

img1 img2 Upon clicking on the modal, it displays the image similar to a lightbox, but the issue arises when the image becomes scrollable and does not fit the screen properly. Take a look at the code below: HTML <div class='row'> ...

htmlcsstwitter-bootstrapbootstrap-4

What is the correct method for caching fonts within an Angular application?

In the process of developing a web application similar to photoshop-minis using Angular, one key aspect I am focusing on is reducing load times. Particularly when it comes to fonts, as not all necessary fonts are available through Google Fonts. Instead of ...

cssangularcachingbrowser-cachewebfonts

Converting CSS to LESS with multiple classes sharing the same properties: step-by-step guide

I have some CSS code here that I'd like to convert into LESS format. Can you help me with that? .A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a { color: #345e8a !important; display: inline-block; font-family: @font-family-sans ...

htmlcssless