New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 9 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug


Show other hotlists

Hotlists containing this issue:
Relevant-for-Bootstrap-4


Sign in to add a comment
link

Issue 589475: Box-Sizing does not inherit correctly inside <details>

Reported by yokestu...@hotmail.com, Feb 24 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0

Example URL:
http://codepen.io/anon/pen/zrgbgY

Steps to reproduce the problem:
1. In CSS, set html{box-sizing: border-box}, and *{box-sizing:inherit}
2. Create a <details> tag with some children in it.
3. Inspect the children of <details>, looking specifically at the box-sizing.

What is the expected behavior?
All elements within <details> should inherit box-sizing correctly.

What went wrong?
Notice that only <summary> inherits box-sizing correctly. All other elements show "content-box".

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 48.0.2564.116 m  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 20.0 r0
 

Comment 1 by cbiesin...@chromium.org, Feb 24 2016

Components: -Blink Blink>CSS

Comment 2 by tkonch...@chromium.org, Feb 25 2016

Cc: tkonch...@chromium.org
Labels: M-50
Status: Untriaged (was: Unconfirmed)
Tested the same on win8.1 chrome version 48.0.2564.116 and canary - All elements within <details> doesn't inherit box-sizing correctly.

Please find the screenshot

Firefox browser works fine - Please find the screenshot

The issue can be seen from M35 builds to latest canary
589475.png
244 KB View Download

Comment 3 by mikelawther@chromium.org, Feb 26 2016

Labels: Hotlist-Interop
Status: Available (was: Untriaged)

Comment 4 by r...@opera.com, Feb 29 2016

Components: -Blink>CSS Blink>HTML>Details
This is because of how details/summary is implemented using a UA shadow tree. A real dom node (div element) is inserted into the shadow tree between the UA shadow root of details and the <content> element which makes the flattened tree have a div child of details. Since this div element does not match css rules from the document, and inheritance follow the flattened tree. We will get the initial value for the div which is inherited down the flattened tree descendants.

This is needs to be fixed in the implementation of HTMLDetailsElement. I don't know if an anonymous box instead of a real dom element would be a better approach.

Comment 5 by sheriffbot@chromium.org, Mar 1 2017

Project Member
Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been available for more than 365 days, and should be re-evaluated. Please re-triage this issue.
The Hotlist-Recharge-Cold label is applied for tracking purposes, and should not be removed after re-triaging the issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by tkent@chromium.org, Mar 10 2017

Labels: -M-50 -Hotlist-Recharge-Cold
Status: Available (was: Untriaged)

Comment 7 by sheriffbot@chromium.org, Apr 16 2018

Project Member
Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 8 by yokestud...@gmail.com, Apr 20 2018

This is still happening in Chrome 66.

Comment 9 by tkent@chromium.org, Apr 23 2018

Labels: -Hotlist-Recharge-Cold -Arch-x86_64
Status: Available (was: Untriaged)

Comment 10 by ndor...@gmail.com, Sep 27

It looks like the Summary element too won't inherit any box-like properties from the parent.

I create a test case where the summary element doesn't inherit margin and padding properties.

See: https://codepen.io/ndorfin/pen/YJKpMa

Sign in to add a comment