Eliminate odd white spacing within nested div elements in Chrome

Is there a way to eliminate the odd white space between two nested divs in Chrome?

<div class="bar">
    <div class="progress">
    </div>
</div>

.bar {
 width: 200px;
  height: 6px;
  border: 1px solid black;
  border-radius: 3px;
}

.progress {
  height: 100%;
  width: 50%;
  background: black;
}

Check out this fiddle for reference: http://jsfiddle.net/hfob7yz4/1/.
In my experience, on Chrome it appears with an unusual margin like this, while on Firefox it looks normal as expected: firefox-img

This issue seems to be screen width dependent and I've noticed it only on my laptop.
Thank you.

htmlcssgoogle-chrome

Answer №1

One common issue that can arise is the visibility of a border around the main div, especially on certain screens.

To prevent this, you can use the following CSS code:
.bar {
    box-sizing: border-box;
}

If you want to learn more about this topic, check out this helpful resource.

Answer №2

At different zoom levels, you may encounter an edge effect where some pixels are not properly mapped due to the system's calculations. This can result in leftover bits of pixels on modern screens.

To avoid using a second inner div, consider painting the progress with a background image using a linear-gradient, which can be dynamically altered by JS as needed.

.bar {
  --progress: 50%;
  width: 200px;
  height: 6px;
  border: 1px solid black;
  border-radius: 3px;
  background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}


}
<div class="bar">
</div>

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

What is the best way to append a single class while also ensuring any previously added classes are removed?

How can I apply the selected class and remove any previously selected classes? <html> <select name="Button-Style" id="Button-Style" style="width:100%;"> <option value="Sun-Flower">Sun Flower</option> <option value ...

javascriptjqueryhtmlcss

The main div on my website appears completely chaotic when viewed in IE versions 7 and 8

On my website, the main div appears floated left on some pages and right on others. In certain pages, it seems to be scattered all over in IE 7 and 8 - I didn't even bother checking in IE6. However, oddly enough, it displays perfectly in IE 6. I need ...

css

What steps should I follow to ensure that the content for the back page is printed on the back page of a booklet when using paged.js?

In the case of a booklet printed from folded sheets, it is interesting to note that the number on the back page will always be divisible by 4. If the content does not have a multiple of 4 pages, then the back page will end up inside the booklet. For my cu ...

javascripthtmlcss

How can a JavaScript function be triggered by Flask without relying on any requests from the client-side?

I'm in the process of setting up a GUI server using Flask. The challenge I'm facing is integrating an API that triggers a function whenever there's a change in a specific Sqlite3 database. My goal is to dynamically update a table on the HTML ...

javascriptpythonhtmldatabaseflask

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

In the IE7 standards mode, table cells with no content will have a height of 1px

When utilizing IE7 standards mode within IE9, empty table cells are automatically assigned a height of 1px. As a result, elements positioned beneath the table appear lower on the page than intended. To view an example of this issue, refer to the code provi ...

htmlcssinternet-explorerinternet-explorer-7

The substance (singular word) extends beyond the margins of the mobile screen

I am facing an issue on my webpage where the title is too long and it goes out of the page on mobile devices. Here is an example: <div class="module-head"><h3 class="module-head-title">Search Engine Optimization - Why Is It ...

htmlcssbootstrap-4

Incorporate a jQuery function into a PHP variable

Is there a way to write a complete JQuery function inside a PHP variable so that it can be called wherever the variable is placed? The variable should include callback JSON text and PHP variables. If this is not possible, is there an alternative approach ...

phpjqueryhtmljson

A sleek and streamlined scrollspy that dynamically updates the active class exclusively for anchor tags

Can anyone help me with this coding problem? I'm currently working on a minimalistic scrollspy code that adds an active class when the content is offset.top. The code works fine, but I want to change the active class to apply to the "a" tag instead of ...

javascriptjqueryhtmldomscrollspy

Optimizing row performance for Angular grids in the Chrome browser

When creating a component that includes a table with numerous rows, everything works well with small amounts of data. However, once the item count reaches 2000 or more, it starts lagging. Scrolling and animations become sluggish. Even after trying to impl ...

htmlangularperformancetypescriptgoogle-chrome

Angular - Acquire reference to the <audio> element

Is there a way to access the methods of an audio tag within my component in order to implement play and pause functions based on click events? The current method I tried does not allow me to access the play() function. How can I correctly approach this? ...

htmlangulartypescript

Basic jQuery template design

Currently, I am developing a user interface that allows users to add or delete items with a similar layout. The process starts with one item and by clicking 'add', more items can be added. These items come in several different types. My current ...

javascriptjqueryhtml

What is the best way to create an animated, step-by-step drawing of an SVG path

I am interested in creating an animated progressive drawing of a line using CSS with SVG/Canvas and JS. You can view the specific line I want to draw here <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with cust ...

javascriptcsscanvassvg

Determining the visible dimensions of an iframe

Is there a way to determine the visual size inside an iframe using JavaScript or jQuery? In this scenario, only a portion of the iframe is displayed. The iframe itself has dimensions of 300x300, but it is being limited by a div to 300x100. <div style= ...

javascriptjqueryhtmlcss

Creating an Image Link within Nivo Slider

I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility. I found a similar question on StackOverflow, but it was rela ...

javascriptjqueryhtmlcssnivo-slider

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

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

javascriptjqueryhtmlcss

Ways to achieve a triangular design without the need for the "polygon" element

Is there a way to achieve a triangular layout for the 'mission' section, specifically within the container boundaries and without relying on the "polygon" feature? I need to ensure that it does not extend beyond the container's borders. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

In JavaScript, when a div element contains an iframe, the click event will not trigger on the div

Check out this sample HTML markup: <div> <iframe></iframe> </div> The iframe is set to fill the outer div. I've added an event handler to the div click event: div.addEventListener("click", function () { console.log( ...

javascripthtmliframe

Is there a way to open an HTML file within the current Chrome app window?

Welcome, My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress: background.js chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('backstage.html', { ...

javascriptcssjsonhtmlgoogle-chrome-app