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

Generating a dataframe with cells that have a combination of regular and italicized text using the sjPlot package functions

I've been trying to set up a basic data table where the genus name in the "Coral_taxon" column is italicized, but the "spp." part following it remains lowercase. I thought of using the expression() function for each row in "Coral_taxon," but so far, I ...

htmlrdataframesjplotitalic

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

Launching a centered pop-up window to display a submitted form message

I am attempting to create a page that displays a confirmation message in a center-aligned pop-up window after the user submits a form. I have managed to open the page in a pop-up window, but I am struggling to center the window using my current code (I pre ...

phpjavascripthtmlforms

Do you think it's important to include a maxlength validation message for an input field in Angular?

Utilizing the maxlength attribute on a form field not only enables Angular's default validation, it also restricts input beyond the specified length from being typed into the text box. So, does this imply that displaying an error message for violating ...

htmlangular

Utilize jQuery to encase the final word of a paragraph within span tags

Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...

jqueryhtml

ReactJS: Want to update card design by utilizing the onClick event handler

Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create car ...

javascriptcssreactjsonclick

Python Selenium: How to interact with an element nested within multiple HTML tags

Currently, I am working on automating a website using selenium webdriver in Python. However, I have encountered an issue when trying to click on a specific tag. The website that I am attempting to automate is quite old and contains numerous iframes and &l ...

pythonhtmlseleniumxpathwebautomation

Adjust the size of CSS elements on hover while removing any margin

I am currently working on making my navigation bar elements larger when hovered over. However, I'm facing an issue where the rest of the website shifts downward slightly when I mouseover them, and it doesn't look good. Is there a way to increase ...

htmlcsshoversizemargin

Issue with hamburger icon in Bootstrap navbar following height adjustment of the navbar

Although my navbar was functioning properly with the hamburger menu expanding down as expected, I encountered an issue after adjusting the height of the navbar. The hamburger button still worked and expanded the menu, but it only displayed the first item o ...

htmlcssbootstrap-4

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Is there a way to collapse child elements in a hover sidebar using Vuetify?

My project includes a sidebar that opens when I hover over it with the mouse. Everything works fine, but within the sidebar, there is a collapse dropdown menu. When I open this menu and then move the mouse away from the sidebar and back again, the collapse ...

javascripthtmlcssvue.jsvuetify.js

Developing an interactive URL in an HTML page for a Flask web application

I'm attempting to create dynamic URLs in HTML and route all "orders/<key_id[0]>" to a Flask app. The hyperlink on the browser should display as a link to name, but it should actually route as "orders/<key_id[0]>". I've tried numerou ...

pythonhtmlflaskjinja2

Customizing TableRow Hover Effects in React with Material-UI

I've been spinning in circles with this issue. It seems like I just can't grasp how class overrides function in Material-ui. I attempted to follow the advice in this response: CSS on Material UI components However, it didn't produce any res ...

cssreactjsmaterial-ui

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

javascriptphpjqueryhtmlajax

Steps for pulling information from the database and presenting it in a text box for users to edit

I'm struggling with a webpage that should allow users to update data from the database, but for some reason, the data is not displaying in the textbox. How can I make it show up correctly? Currently, on my webpage, users have to manually input all th ...

htmldjangodjango-viewsdjango-forms

changing the RadioButtonList to preselect a default value

On a page, I have a pre-existing RadioButtonList where I want to make the second button checked by default instead of the first one. Since I am unable to edit the original control directly, it seems like I might need to achieve this using javascript on th ...

c#javascripthtmlradio-buttonradiobuttonlist

Tips for sending data through AJAX before the browser is about to close

My issue is with a javascript function that I've called on the html unload event. It seems to be working fine in Google Chrome, but for some reason it's not functioning properly in Firefox and IE. <script> function fun() { ...

javascriptjqueryajaxhtml

Difficulty Uploading Files

I'm facing an issue when trying to upload multiple files. When I select more than 1 djz_file, no information is obtained from $_POST and $_FILES. However, if it's a single file, everything works as expected. <fieldset> ...

phphtmlfile-upload

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...

javascriptjqueryhtml

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...

javascripthtmlcss