A circular overflow div showcasing an image

While Chrome is able to effectively contain an image within an overflow:hidden rounded div, Safari seems to struggle with this task as the overflow:hidden property does not seem to work properly.

Here is an example:

Below is the SASS code I am using:

.profile-image-container
  position: relative
  top: 3px
  display: inline-block
  cursor: pointer

  .profile-image 
    width: 33px
    height: 33px
    display: block
    position: relative
    border: 2px solid $default-border-color
    position: relative
    top: -5px
    border-radius: 50%
    -moz-border-radius: 50%
    -webkit-border-radius: 50%
    overflow: hidden

HAML code:

.profile-image-container
    .profile-image
      =image_tag "avatar.jpg"
    %span.status.online
      %i.icon.icon-check-small

Fiddle: http://jsfiddle.net/LB2EQ/

css

Answer №1

Issue 1. When using Safari, images do not automatically inherit the border-radius attribute, so it must be explicitly added.

Issue 2. The image dimensions do not match the dimensions of the profile picture container, causing an unusual border-radius effect (only on the upper left corner) unless resized accordingly.

.profile-image img{
    width:33px;
    height:33px;
    border-radius:50%;
}

View the functional solution on jsfiddle: http://jsfiddle.net/LB2EQ/1/

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

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

htmlcsshover

Can you provide guidance on how to showcase the chat date and time for each message in a webchat created with the bot framework SDKV4 using C#

I've successfully created a chatBot using bot framework SDKV4 in C# with the WebChannel as the channel. Everything is functioning properly, but I have a specific goal in mind: For each message that the user types or the Bot replies to, I want a time ...

c#htmlcssbotframework

Hover over elements to reveal D3.js tool tips

Currently, I am utilizing a tutorial for graph tooltips and finding it to be very effective: http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d It is working seamlessly for me! However, I have encountered a slight problem... In the tutorial, the graph disp ...

javascriptcssd3.js

What is the best way to implement a required input field in Vue.js?

I need some assistance with my chat functionality. I want to prevent users from sending empty messages, so I want to make the input field required. Can you please help me with this? I have already tried adding "required='required'" to the input ...

javascripthtmlcsslaravelvue.js

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

javascriptjquerycssangularintercom

Animating Font Awesome content through CSS transitions

I am looking to animate a font awesome pseudo element on my website. Below is the HTML code I am working with: <li class="has-submenu"> <a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu&a ...

htmlcsspseudo-element

Refreshing a div's content with a single click to update the page

I'm experimenting with elements above my head and striving to absorb new knowledge. In my admin page, I use jQuery to reveal a hidden div that displays another page within it. Here's how I achieve this: $(document).ready(function(){ $("a#fad ...

phpjavascriptjqueryhtmlcss

Unable to choose anything within a draggable modal window

Can someone please assist me? I am struggling to figure this out. I can't select text inside the modal or click on the input to type text into it. I suspect it may be due to z-index issues, but I'm having trouble locating them. var currentZ = n ...

javascripthtmlcssangularjs

Step-by-step guide to creating a clickable div

Having an issue with around 200 clickable buttons on my website, all designed the same: <div> <asp:hyperlink> //or LinkButton </div> The background-style of the button is within the Div and the text of the button is in Hyperlink / LinkB ...

asp.netcsshtmlhyperlinkwebforms

In a two-column layout, ensure that the text in the left box is aligned to the left and the text in the right box is aligned to the

I'm working on a flexbox layout with two columns, each containing text. The text in the left column is aligned to the left, while the text in the right column is aligned to the right. However, I want the text in the right column to switch to left al ...

htmlcssflexbox

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

css

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material

What's the best way to continuously increase my counter using the data received from my AJAX calls?

On the final step of my first ajax project, I have implemented a thumbs-up icon that increments a column in the database when clicked. The following code achieves this: Viewable Page HTML and jQuery: <div id="comment_id">+1</div> <div id=" ...

phpjqueryhtmlcssajax

Is there a way to ensure that the hover state div displays above all other elements and outside the container?

I have spent the past two days working on this particular issue. Example: It's a rather complex design, so to avoid pasting a lot of code here, I recreated the main structure on this jsfiddle and included the simplified code at the end of this post: ...

csshover

Choosing a Specific Column within a CSS Grid

Currently, I am trying to figure out a method for selecting columns within a CSS grid. Through the use of the :nth-child() selector, I managed to select a column in a static grid. For instance, in a grid with 3 columns, :nth-child(2) will target every grid ...

javascriptjquerycsscss-grid

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss

What is the best way to eliminate excess space on the right side of a div element

I recently utilized a column structure with bootstrap 4, resulting in a layout with 1 row containing 2 columns: <div class="left"> <hr class="container hline"> <div id="main" class="container border"> <di ...

htmlcssbootstrap-4

Switch between divs using an update panel

Consider this scenario: Numerous div controls are present on an aspx page, and update panels are being used to prevent page refresh. These divs contain various controls like buttons and textboxes: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> ...

javascriptjquerycssasp.netajax

Collapse in Bootstrap 3 Navigation Bar

I'm really struggling to understand why my navbar is refusing to collapse. I've included the necessary Bootstrap CSS and JS files, as well as the transition and collapse JS files. Below is the code that I've been working with. Any assistance ...

javascripthtmlcsstwitter-bootstrap