The circular shape of a border-radius becomes distorted when scaling at various browser zoom levels

My challenge involves a small circle with a 4px diameter that I need to scale using anime.js. While it works perfectly at 100% zoom (default), I also require it to behave consistently across different zoom levels, specifically from 50-100%.

To see the issue in action, you can check out this example fiddle: https://jsfiddle.net/6x4ry3no/1/

In the provided fiddle, if you use 'CMD' + '-' or its Windows equivalent to zoom out, you'll notice that the circle loses its perfect shape and becomes a rounded quadrilateral at zoom levels between 50-100%, which is not desirable.

This problem seems to be somewhat connected to how the zoom percentage relates to the width and height of the circle, as it behaves better at certain percentages.

While using an SVG could potentially solve this issue, scaling SVGs would still require a transform to maintain the shape's position, something I'd prefer to avoid.

Any suggestions on how to tackle this? Your insights are greatly appreciated!

cssanime.jsborder-radius

Answer №1

It's strange that none of the methods I attempted were effective in maintaining the circular shape when zoomed out. However, upon replacing the div element in your fiddle with an SVG (and eliminating the border-radius and background color from the CSS), the issue seems to be resolved:

#circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
}
<svg viewBox="0 0 100 100" id="circle">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

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

Acquiring Twitter updates for a dynamic Bootstrap carousel display

I've been trying to load multiple tweets from the stream into the slideshow, but I can only get one to show up. I believe it has to do with the placement of the <div id="feed"> element, but I can't seem to figure out what I'm missing. ...

jqueryhtmlcsstwitter-bootstrap

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Tips for integrating Less and Bootstrap in an Angular 6 project

After making changes to angular.json to use less as the styleext, I tested it by creating a component. However, now I want to incorporate Bootstrap classes into my component's css/less. I specifically want all buttons in my component to have the .mx-1 ...

cssangularbootstrap-4less

Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions. Just to recap, I'm trying to: 1. La ...

jquerycssmenuhover

Ensure that the divs are properly aligned and construct columns within a single column

I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...

htmlcssangular

Bootstrap navigation bar collapsing horizontally instead of vertically

My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, b ...

htmlcsstwitter-bootstrapbootstrap-5

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...

htmlasp.netcssiframe

Ways to align the icon and text to the left side of the screen?

I am looking to utilize Bootstrap's list group feature to create a navigation bar similar to the image below: https://i.sstatic.net/bndVl.png I am curious about how I can shift them to the left. Here is what I have attempted so far. .list-group-i ...

htmlcsstwitter-bootstrapbootstrap-4

Error Alert: JQuery Pop Up Issue

Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on: <!-- POP UP HTML --> <div class="infocontainer"> ...

javascriptjqueryhtmlcsspopup

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain th ...

htmlcss

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

javascriptjqueryhtmlcss

The table width is malfunctioning on Firefox when viewed in HTML

I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as sh ...

javascripthtmlcssfirefoxprinting

Visitors may not immediately notice the CSS/JavaScript modifications in their browsers

Currently, I am working on a web application utilizing Spring MVC and Hibernate, deploying it on Apache Tomcat 8. Most of my users access the app using Google Chrome. However, I have encountered an issue where whenever I update the CSS or JavaScript files ...

javascriptcssapachetomcatbrowser-cache

Struggling to eliminate the unseen padding or white space preventing the text from wrapping under the button

Just starting out with html and css and could use some assistance with a small issue I've come across. While redesigning a website, I have a three-button form (Donate, Find, Subscribe). I'm trying to get the paragraph underneath the Donate and Fi ...

htmlcssformsbuttonwhitespace

Is it possible for the shadow of a pseudo element to remain lingering behind its corresponding element?

I'm experiencing an issue where the shadow of the pseudo element :before appears in front of its associated element. Check out this JSFiddle link for reference <div class="rectangle"> <p>Lorem Ipsum</p> <a href="#" style ...

htmlcsspseudo-element

Having trouble getting the full width of a hidden div to work properly?

I am facing an issue with a two-part menu design: the left side consists of a traditional UL, while the right side contains a link within a div element. The fixed-width of the right div is causing complications as the left div needs to occupy all remaining ...

htmlcss

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Accordion content in motion

After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header. Even though I included height: auto and transition in the accordion container, it did not seem to have any impa ...

javascripthtmlcss

The act of selecting a parent element appears to trigger the selection of its child elements as well

I am attempting to create an accordion using Vanilla JavaScript, but I have encountered an issue. When there is a child div element inside the header of the accordion, it does not seem to work and I'm unsure why. However, if there is no child div elem ...

javascripthtmlcss

Tips for sending a value or props to a CSS file

Is there a way to dynamically update the x and y position based on user clicks, and then apply these changes to the top and left properties of a div? .dataCardAbsolute { position: absolute; top: 100px; left: 300px; overflow: auto; } React.useEffec ...

cssreactjs