Chrome: box-sizing: inherit css rule is broken

[davidsavoie1]

Bug Report

Many layouts are broken in the newest Chrome version (103.0.5060.53 in my case). I tracked it down to a problem with box-sizing: inherit in a *, :after, :before CSS selector. The inheritance goes back up to the html tag, where it is specified as box-sizing: border-box. However, it doesn't seem to be properly applied, so many layouts depending on border-box to compute relative widths for example are broken and take up way too much space. This bug is not visible in latest version of Firefox (101.0.1).

I also reported a bug to Google Chrome, but if FUI could strenghten the layout with updated CSS, it would prevent such problems. As of now, all the web apps I developped with FUI are badly broken.

Steps to reproduce

This is visible in the official FUI documentation in Chrome 103. For example, the Grid section is badly impacted. To see the root cause:

1. Go to Equal Width buttons section in the FUI documentation
2. Open developer console (F12);
3. Select the body tag in the DOM explorer;
4. Go to the *, :after, :before rule;
5. Change the value of box-sizing to boder-box.

I do not know if this is the right way to fix the problem, as it might break something else I am not aware of, but it shows the origin of the issue.

Expected result

box-sizing: border-box should be properly applied to all elements.

Actual result

Layouts are distorted because of padding not being considered in the elements' dimensions.

Screenshot

Version

2.8.8 in the documentation, but happens in lower versions too (at least down to 2.6)

Edit

I see that Bootstrap has been adressing this kind of issue in 2017. I don't know why it showed up just now in my FUI projects.

[lubber-de]

I am sorry, but i cannot reproduce the behavior you are describing. Infact i don't recognize any difference when switching from inherit to border-box on chrome (or edge) 103.0.5060.53 (windows)

What OS / dpi settings do you use?
Do you use any chrome extensions which may cause this? Try incognito mode which should disable all extensions.

[davidsavoie1]

You're absolutely right! An extension was the culprit, as I discovered by disabling them all and reintroducing them one by one. But this is maddening, as nothing in the DOM explorer points to any CSS override from the extension.

At the very least, I am relieved to know that my clients won't ever see the distorted version I was seeing on all my apps (unless they have he same extension), which was frightening. I'll contact the extension's team to try to figure out the cause.

Thanks a lot!