Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle

Here is the HTML structure:

<div class="parent">
  <div class="child"></div>
</div>

This is the corresponding CSS code:

.parent {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}
.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  clip: rect(auto auto auto 100px);
  background: green;
}

Currently, the child completely overlaps the parent. While Firefox displays the parent, Chrome makes it invisible. Strangely, adding even just left: 1px to the child will make the parent appear. How can I fix this bug?

htmlcssgoogle-chrome

Answer №1

If you haven't already, consider making them siblings instead of parent and child elements:

.box1 {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: blue;
}
.box2 {
  position: absolute;
  width: 120px;
  height: 120px;
  clip-path: circle(50%);
  background-color: orange;
}
<div class="box1"></div>
<div class="box2"></div>

Answer №2

It's important to be mindful of what you are trying to accomplish here.

The issue may lie in instructing the child element to have a position absolute with 0px on all four sides, leading to differing interpretations by different browsers. This lack of specificity regarding width and height can cause discrepancies in how Chrome and Firefox display the element.

In Chrome, the browser seems to default to setting the child element's dimensions to match those of its parent (100% width and height), as evidenced by inspecting the computed styles.

On the other hand, Firefox does not automatically assign height or width to the child element, resulting in it not taking up any space on the screen, allowing the parent element to show through.

This discrepancy is likely due to invalid CSS rather than a bug, with each browser doing its best to render the code correctly.

When specifying positioning, consider using either top or bottom, and left or right, along with defining the element's height and width for consistent display across browsers.

If you provide more details on your intended outcome, I would be happy to assist further.

I hope this information proves helpful.

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

Is it possible to convert HTML to PDF on the server?

A PDF file is being created from an HTML file using the princexml pdf converter package. The data for the HTML file is provided by the server. In the browser, jQuery is used to generate the input string (HTML code) for creating the PDF. Once the input stri ...

jqueryhtmlprincexml

Angular controller utilizing the `focusin` and `focusout` events from jQuery

Can anyone help me figure out why this piece of code is generating syntax errors in my AngularJS controller? $(".editRecur").focusin(function() { $(.recurBox).addClass("focus"); }).focusout(function() { $(.recurBox).removeClass("focus"); }); ...

javascriptjqueryhtmlcssangularjs

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

htmlcssreactjs

How to ensure two unordered lists are aligned at the same baseline using CSS

Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...

csshtmlalignmenthtml-lists

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

Docker is throwing a NoSuchElementExeption, but everything runs smoothly on localhost

I have developed an automated test using Selenium, and it runs successfully in Eclipse. However, when I try to run it in Docker, I always encounter the NoSuchElement Exception. I am hoping that someone can assist me with this issue. Here is a snippet of my ...

javadockerseleniumgoogle-chromeselenium-chromedriver

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

I want to assign the value "NA" when no radio button option is selected. Currently, I am using the following code snippet: $("input[name='question']:checked").siblings('label').text(). However, this code returns a blank value if any rad ...

htmljquery

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

cssreactjsmaterial-uijssinline-styles

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Display the entire paragraph when hovering over it

Is there a way to make the entire paragraph appear on hover instead of just showing parts of it? I am building a website on Weebly for a school project and my knowledge is limited. I tried using the following code, but it only displays some of the content ...

htmlcsshover

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss

JavaScript's onclick function for clearing dropdown fields will only work once for each specific dropdown field

I have scoured all the related questions and answers on StackOverflow, but none seem to address my specific issue. Here is the HTML code I am using: <select name="search_month" onclick="javascript: $('#categories').val(null);" id="months"> ...

javascriptjqueryhtmldrop-down-menu

Automatically updating the results section while executing SQL queries in PHP

Here is a JavaScript/Ajax code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready (function () { var updater = se ...

javascriptphpjqueryhtml

Choose the initial drop-down option and concentrate on it

How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...

jqueryhtmlcss

What are some methods for simulating user interaction on input and button elements?

Here is a code snippet available in this stackblitz demo. Essentially, there is a basic form with an input field and a button. Clicking the button will copy the current value of the input to a label: https://i.stack.imgur.com/pw3en.png after click: htt ...

javascripthtmlangular

Leveraging AngularJS ngBind with a JavaScript object

Within the given string, integrating a javascript object and embedding it into an ngBinding does not result in proper evaluation. I have a string where I want to incorporate a specific part of a javascript object and am transitioning to Angular for its use ...

javascripthtmlangularjs

The background color of the HTML element is not displaying properly in Internet Explorer 8

Currently, I am using the <body> tag to wrap three divs on a website where all background colors are set to white. In the CSS, I have specified the background color as #fff for the html and body tags. The site displays correctly in every browser exc ...

htmlcssinternet-explorerinternet-explorer-8background-color

Navigating events within the Material Design Light (MDL) mdl-menu component can be

I am utilizing Material Design Light with just PHP, jQuery, and MDL min CSS and JS, no other frameworks involved. Keeping it simple with a basic menu. <button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> ...

phpjqueryhtmlmaterial-design-lite