Strange circle border appearance in Android / Chrome device

Having an issue with my code on a Samsung Galaxy S5 in Chrome 54.0.2840.85, Android 6.01.

You can view the problematic codepen here: http://codepen.io/johnsonjpj/pen/jVpreB

The border displays correctly on Firefox and iPhones, but not on my device.

Troubleshooting reveals it may be related to the width of the .image-boundary class or the border-color.

Possibly these lines are causing the issue:

.image-boundary {
  border-top-color: #d64700;
  border-color: #ffffff;
  background: #002a4a;
}

.image-boundary {
  position: relative;
  width: 50%;
  height: 0;
  padding: 25% 0;
  margin: 1em auto;
  border-radius: 50%;
  border-width: .33em;
  border-style: solid;
  overflow: hidden;
}
androidhtmlcssgoogle-chromesamsung-galaxy

Answer №1

Dealing with a similar issue, I encountered a problem where a border on an image with a 50% border-radius in modern Android Chrome had some blank parts, just like the original poster demonstrated.

To resolve this issue, I adjusted the styling of the image container to include the border-radius, background color, and padding needed for the desired border effect.

<div id="logo">
    <img src="...">
</div>

#logo {
    border-radius: 50%;
    padding: 5px;
    background: #888;
}
#logo img {
    border-radius: 50%;
}

Answer №2

To achieve the desired border radius effect, consider using this prefixing method:

-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%

If the above doesn't produce the intended result, try adding the border-radius individually for each corner:

border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;

Answer №3

It appears that the issue may be related to a bug in Google Chrome for Android.

To potentially resolve this problem, try adding the following code snippet to the element. Please test it out and let me know the results since I don't have access to that specific phone.

.image-boundary {
perspective: 1px; /* any non-zero value will work */
}

Alternatively, you could try using a different unit across the border. For instance, instead of using `em's`, consider using `%`.

You can find more information about this issue at: CSS Border radius not trimming image on Webkit

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

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Take a look at this HTML snippet: <form ....> <textarea>....</textarea <input .... /> </form> I'm trying to set up a help section that appears when the user focuses on any form element, and disappears when they lose ...

javascriptjqueryhtmlformsfocus

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

javascripthtmlcsslocationlocation-href

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

javascripthtmltextradio-buttonvar

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

javascriptcss

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

htmlcsstwitter-bootstrap-3

Enable only a single radio button to be selected in HTML

I am facing an issue with my radio buttons where I only want one to be selected at a time. Despite giving them the same name, all four can still be selected simultaneously. <h1>Portion</h1> <input type="radio" name="portion_n ...

html

What is the best way to save Arabic text in a MySQL database from an HTML form using PHP?

I've been searching extensively, but have had no luck! >> Following the PHP connection I included: mysql_set_charset('utf8', $conn); >> The form input tag has the attribute: accept-charset="utf-8" >> I confirmed that the d ...

phphtmlmysqlutf-8arabic

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

javascriptcssreactjs

What is the best way to show all cards in Angular when no filtering input is provided?

I have implemented a filter feature for multiple cards in Angular using Pipes. The filter works well, but I am facing an issue where no cards are displayed when there is no input value provided. I would like all the cards to be displayed when no input is g ...

htmlangulartypescriptselectfilter

Arranging information within the Ngb-Accordion

Welcome to the code snippet showcasing how to create an accordion in Angular: <ngb-accordion [closeOthers]="false" activeIds="0"> <ng-container class="card" *ngFor="let post of Posts"> <ngb-panel title="{{post.title}} - ...

htmlangulartypescript

Tips for preventing CORS errors while rendering an image on a canvas

Working on a project for my coding bootcamp where I need to overlay bandaids on an image of a bear using canvas. The main challenge is to check the color of the area that users click to ensure they don't put bandaids on the white space around the actu ...

javascripthtmlcanvasdropbox

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

htmlcssforms

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

javascriptjqueryhtmljquery-mobile

Implementing Multiple Shared Footers in Rails 3

Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...

cssruby-on-rails-3footer

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...

javascripthtmlcss

Showing a variety of pictures within a specified time frame

In my CSS, I have defined classes that allow me to display different background images on a page at set intervals: .image-fader { width: 300px; height: 300px; } .image-fader img { position: absolute; top: 0px; left: 0px; animation-name: imagefade; ...

javascripthtmlcssreactjs

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...

htmlcssprogress-bar

Converting Java to PHP for establishing a serial connection with Raspberry Pi

I've been diligently searching all day, but I just can't seem to pinpoint the issue here. Some context: I'm using an Android app to communicate with my Raspberry Pi via PHP and send serial commands to my Arduino. I followed the instructions ...

javaphpandroidarduinoraspberry-pi