Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone.

Problem: https://i.sstatic.net/ffqWz.jpg

Solution: https://i.sstatic.net/z1bUB.png

Below is the HTML code snippet:

<div class="row">
    <div class="col-md-5">
        <div class="round-img round-img-left">
            <img src="assets/img/photo/person2-square.jpg"/>
        </div>
    </div>
    <div class="col-md-7 advisor-content advisor-content-left">
        <h3 class="heading2 heading-underline">
            Lorem Ipsum
        </h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis iaculis nisi. Duis sagittis id quam ac egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis iaculis nisi. Duis sagittis id quam ac egestas.
        </p>
    </div>
</div>

Here's the CSS code provided:

.round-img img {
    height: 360px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 35px solid #343434;
}

Appreciate any assistance on this matter.

htmlcss

Answer №1

Whenever I encounter issues with the CSS property border conflicting with border-radius, I have found a solution that works well for me. Instead of using 'border', I opt to use the 'box-shadow' property instead. Works like a charm!

.round-img img {
    height: 360px;
    width: 360px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 35px #000;
    -webkit-box-shadow: 0px 0px 0px 35px #000;
    -moz-box-shadow: 0px 0px 0px 35px #000;
    overflow: hidden;
    margin: 35px;
}

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

Do not use Express.js to serve the index.html file

Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...

javascripthtmlnode.jsexpressnpm

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

I'm looking for a way to use the output of a JavaScript function as the value for an input field in HTML. Currently, I have a JavaScript function that generates a random string: function generateRandomString(length) { let result = ''; ...

javascripthtmlinput

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

javascriptjquerycsswordpressanimation

Display a limited number of characters along with a button on the blog tag pages. Clicking on the button will reveal the complete text description

Hey, I am looking to replicate the way WooCommerce tags descriptions are displayed on my WordPress blog. I want it to show only a certain number of characters with a "show all" link, similar to how it appears on this site: I have found some code that work ...

javascriptphphtmlwordpress

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Is there a way to preserve the original image while having a draggable blur mask over it? If you want to see an example of a draggable blur mask over an image, you can check out this link: https://codepen.io/netsi1964/pen/AXRabW $(function() { $("#ma ...

javascriptjquerycsscanvas

How can you apply margin to an element within a column in Bootstrap 4?

Within a column, I have several span elements: <div class="container-fluid"> <div class="row"> <div class="col"> <span class="myClass">some text</span> <span class="myClass">some text</span> ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to view HTML without an internet connection

I have encountered an issue where my files work fine when uploaded to an online server, but do not work when accessed locally offline. An error message about a cross-origin issue appears. How can I solve this problem? Error message: Security Error: Conte ...

javascripthtml

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

htmlangulartypescriptangular-ng-ifangular-pipe

Tips for scrolling a div that has too much content within a webpage

Is there a method to manipulate the scrollbar within a div on a webpage? Specifically, I am attempting to automate scrolling up and down on an Instagram post like . However, since the scrollbar may be hidden using CSS properties, detecting it can be challe ...

javacssseleniumscrollbaroverflow

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

Syncing user information with MySQL database

I have created a user profile page that pulls in the information of the logged-in users. The issue I am facing is that when I click on the submit button, all the updated information gets sent to an edit_profile.php file except for the password field. I hav ...

phphtmlmysql

Positioning a Three.js static CSS2DObject with respect to the camera's perspective

I am currently working on a unique program visualizer that utilizes Three.js to showcase various aspects of a program to the user. One crucial feature of this visualizer is allowing users to click on specific objects to view additional information about th ...

javascripthtmlthree.js

What issues could arise from utilizing PHP for generating variables within my CSS file?

One major limitation of CSS is the absence of variables. It would be beneficial to have the ability to use variables for controlling things like the location of imported CSS and color schemes within a design. An alternative solution could involve using a ...

phpcss

Angular 9: The instantiation of cyclic dependencies is not allowed

After transitioning from Angular 8 to Angular 9, I encountered an issue with a previously functioning HTTP communication service. The error message now reads: Error: Cannot instantiate cyclic dependency! HttpService at throwCyclicDependencyError (core ...

htmlangulartypescriptangular9

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario: <div style="display:flex; flex-direction:column; height:100vh;"> <div style= ...

htmlcssgoogle-chromeflexbox

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

javascripthtmlcssmedia-queriessidebar

Troubleshooting CSS issues in a Docker container running a VueJs project

I have successfully set up a VueJs project on AWS using Docker. Following the guidelines in the Real-World Example section of the documentation, I created a Dockerfile with instructions to copy my nginx conf file: # build stage FROM node:lts-alpine as buil ...

cssvue.jsnginx

What is preventing CSS from adding a line break for the input element?

Here's a clever way to insert a new line before every span tag. span { display: inline; } span:before { content: "\a "; white-space: pre; } <p> First line.<span>Next line.</span> <span>Next line.</span& ...

htmlcssnewline

Separate a single large table into two smaller tables based on the information found in the third column of every row

Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...

javascriptjqueryhtmlhtml-tablegreasemonkey