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

Internet Explorer 9 (IE9) causing CSS dropdown menu to be truncated due

My issue is very similar to the problem described in this post: CSS Flyout menu gets cut off by borders of its container in IE9 The difference in my case is that I need to set the z-index (and position) on the container. You can view my JSFiddle here: h ...

cssinternet-explorer-9positionz-indexdrop-down-menu

How can I ensure that a form submission still functions properly even when the submit button disappears due to an onBlur event in React and Next

I am facing an issue with a form on my website that triggers an event upon submission. Within the form, there is a textarea field. When you click on the textarea, a submit button appears. However, it disappears when you click out of the textarea. This fun ...

htmlreactjsreact-hooksform-submitonblur

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction

How can you showcase search results on a single page URL in PHP by simply clicking a submit button?

insert image description here Hello Everyone, I am facing a particular issue: Within the url "/media.php?module=riwayat&noreg=00020517" All data with 'noreg = 00020517' appears. I aim to refine the displayed data using the 'keywor ...

phphtmlmysql

The linking process in AngularJS is encountering difficulties when trying to interact with

I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...

javascripthtmlcssnode.jsangularjs

Checking with jQuery Validate: displaying an error message if input matches a certain value

I spent 6 hours trying to figure out a solution to my issue. Currently, I am utilizing the jQuery Validation plugin. In my form, there is a password input field. When an AJAX request detects an incorrect password, another input field is set to a value of ...

javascriptjqueryhtmlajaxvalidation

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

My Angular2 project includes HTML5 camera access functionality. I launch the project using Angular CLI (ng serve), which starts the web container for testing purposes. When trying to access the camera, the browser prompts me for permission. Once granted, e ...

javascripthtmlcamera

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

determine the vertical dimension of the horizontal scrollbar

I ran into an issue where I needed to determine the height of a horizontal scrollbar. This question and answer recommended using the clientHeight property to calculate the difference. Unfortunately, this method no longer works as shown here: https://jsfid ...

javascripthtmlcss

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

javascriptjqueryhtmlcssfunction

Inject additional content into mesh using data from node server

If you're unfamiliar with OWF (Ozone Widget Framework), it's essentially a system of widgetized HTML pages that communicate through a server-based subscription service. For example, take a look at this demonstration: While I can easily add text ...

node.jsgoogle-chromeopengl-esthree.jstextures

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

htmlcsstwitter-bootstrapbootstrap-4

What is the process for displaying a document file in an iframe that is returned from a link's action?

I have a main page called index.cshtml. This page displays a list of document files along with an iframe next to it. My goal is to load the selected document file into the iframe when I click on any item in the list. However, currently, when I click on a d ...

javascripthtmlasp.net-mvc

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

javascriptjqueryhtmlcss

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...

javascriptjqueryhtmlcss

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

javascripthtmlangularlisttypescript

PHP programming language for opening, editing, and saving HTML files

Trying to use PHP to open an HTML file, remove the content of a specific div (class Areas), and then save it. $dom = new DOMDocument; $dom->loadHTMLFile( "temp/page".$y.".xhtml" ); $xpath = new DOMXPath( $dom ); $pDivs = $xpath->query(".//div[@class ...

phphtmldomremoveclass