The Border Radius Problem in Google Chrome

Greetings! I am currently working on a project for a website and have encountered an issue with the gallery on the projects page. The images are meant to be displayed as circles, and when hovered over, they should maintain their circular shape and have a black hover effect.

However, I recently discovered that in Google Chrome, the circles are appearing as squares in all states instead. I have tried various solutions such as applying border radius code for all browsers, using pixels instead of percentages, and even adding specific CSS rules through the inspect element tool.

Despite my efforts, the issue persists and the circles do not display correctly on the site. Some sources suggest that Google Chrome may struggle with the overflow: hidden property, but this does not seem to be the root cause in this case.

If anyone has insight or suggestions on how to resolve this problem, I would greatly appreciate it. The site was built on WordPress.

Thank you in advance for any assistance.

cssgoogle-chromeoverflowhidden

Answer №1

It appears that there is a known issue in Chrome related to transitions, specifically how parent/child order is affected during DOM painting:

For more information, you can visit the following link: https://code.google.com/p/chromium/issues/detail?id=157218

If you're looking for an alternative solution, you could consider increasing the size of the entire circle, including the border and shadow. However, this may not achieve the desired effect.

Additionally, you may find this Stack Overflow thread helpful: Bug with transform: scale and overflow: hidden in Chrome

Answer №2

Inserted

.view-first img {
    transform: scale(1.2); /* inserted new */
    transition: all 0.2s ease-in-out;
}

eliminated

.view{
    display: none; /* eliminated */
}

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

Shift the sleek navigation arrows to the interior of the slides

Is there a way to relocate the navigation arrows on the slider images? I have tried various methods found online with no success. Currently using ASP.NET, but doubt it matters. Employing the latest version of SLICK. Here is the HTML code snippet: <%@ ...

javascripthtmlcssasp.net

What is the method for incorporating a link in an accordion header next to the toggle button with Bootstrap?

I'm attempting to enhance a link in the accordion-button so that only the arrow is clickable for collapsing. The CSS I added below makes the arrow clickable, but I am having trouble getting the link in the accordian-button to work. I want users to be ...

csstwitter-bootstrapbootstrap-5bootstrap-accordion

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...

htmlcsstwitter-bootstrap

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

It feels really repetitive to have to add margin classes to each LI manually on a non-dynamically generated menu. It almost seems as messy as using inline style attributes... Is there a more efficient way to handle this? While it may not be a big deal fo ...

csstailwind-css

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

Having trouble getting this CSS code to work in Internet Explorer. Need a solution that is compatible with IE for setting the background. body { background: url("images/Login-BG.png") no-repeat center center fixed; -moz-background-size: cover; -webkit ...

htmlcssinternet-explorer

When taking a vertical picture on my iPhone, my Vue component does not function properly

Having trouble with displaying recently uploaded images on a form. If the image is taken from a phone, it may have an exif property that browsers do not handle correctly, causing the picture to appear flipped or sideways. Upside down photo To fix this is ...

javascripthtmlcssvue.jsexif

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

htmlcsswordpress

Fatal error in CodeIgniter occurring while invoking CSS less functions

Whenever I try to execute this function, I encounter the following error message: "Fatal error: Uncaught exception 'Exception' with message 'load error: failed to find test.less' in C:\xampp\htdocs\project\applic ...

phpcsscodeigniterless

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

javascriptcssangulartypescript

Tips for implementing ng-hide/ng-show animations

Is there a way to create an animation on an element in Angular that will be triggered when the item's visibility is changed using ng-hide/ng-show? Which specific CSS classes should be included to ensure smooth animations on elements? ...

cssangularjscss-animations

The design of the website is all over the place

I am encountering challenges in creating distinct containers for the header, body, and other sections of my website. The layout is not turning out as planned, and I can't pinpoint where my code is going wrong. Any advice or suggestions on how to resol ...

htmlcss

Elements with inline-block display not aligning horizontally next to each other

I am puzzled as to why the two sections, section.structure and section.specificity, are not aligning properly. It seems that when I reduce the width, they line up correctly at a certain point which I haven't identified yet. My goal is to have the wid ...

htmlcss

Expanding a grid cell beyond 100% can be achieved using a 1

I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...

htmlcsscss-grid

Merging Fewer with Visual Studio 2012

Combining all Less files into a single stylesheet? After following the instructions in the above link, I have successfully merged my Less files together for easier CSS reading during development. However, I would like to ensure that end users only need to ...

cssvisual-studio-2012lessweb-essentials

Once it hits the fourth tab, it must not cycle back to the first one

Hi there, I'm new to JavaScript I noticed that when I click the left and right arrows, the tabs circle back to the beginning However, I would like the circle to stop. When it reaches the fourth tab, it should not go back to the first. This should also ...

javascriptjqueryhtmlcss

In Python, when using Selenium with headless mode in Chrome, scrolling functionality seems to

I've been developing a web scraper to gather Facebook post comments for analysis purposes. When using Facebook, I noticed that after logging in, we can scroll through the page to load all the comments dynamically. However, I encountered an issue wher ...

pythongoogle-chromeselenium-webdriver

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

The CSS on my website is causing issues with the recaptcha functionality

Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form. However, after completing the form and applying the necessary CSS styles, I noticed tha ...

htmlcssiframe

Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible? <div class="inline-edit-col"> <span class="title inline-edit-categories-label">Brands</span> <ul class="cat-checklist product_brand-checklist"> < ...

javascriptjqueryhtmlcss

Customize Material-UI Icons styles in React app

I'm working on a React.js app with Typescript and I need to remove the default visited Material Icons coloring from an anchor tag. Here's the stylesheet I tried: const useStyles = makeStyles((theme: Theme) => createStyles( myAnchor: ...

htmlcssreactjstypescriptmaterial-ui