Chrome Ships With This TERRIBLE Code (it took me so long to debug...)

In a detailed exploration of a Chrome bug, the speaker recounts their frustration with a dialogue element's unexpected margin despite setting its width and height to 100VW and 100VH. Investigation reveals a hidden pseudo-element applying a max-width and max-height, not shown in Chrome's Styles tab but part of the browser's default stylesheet. The speaker credits Wo for the discovery and discusses with Kevin Powell the broader issue of CSS defaults, like the content-box model, which the CSS working group regrets. The speaker suggests a 'strict mode' for CSS and criticizes the lack of visibility of browser-applied styles, which complicates debugging and development.

• The narrator was working on a tutorial and encountered a frustrating behavior in Chrome.
• A dialog element with Tailwind CSS was used for full-screen width and height.
• Despite being set to 100VH and 100VW, Chrome displayed a border around the modal.
• Attempts to remove padding and margin did not resolve the issue; the element was not honoring the specified dimensions.

"There's this margin around this even though it's set to width and height 100."

• This quote indicates that the dialog element was not displaying as intended, despite the CSS properties being set to full width and height.

"My first suspicion is this obnoxious pseudo element backdrop."

• The narrator suspected that a pseudo-element might be causing the issue with the dialog element's dimensions.

"This is the point where I went insane if we change it from margin zero to what it was by default which is margin Auto now when you hover you see that margin there."

• The narrator expresses frustration upon discovering that changing the margin back to 'auto' reveals an unexpected margin in the Chrome developer tools.

• The narrator investigated the issue further, suspecting a pseudo-element was involved.
• Many suggestions were received via Twitter, but only one person identified the correct issue.
• A hidden pseudo-element specific to the dialog element was causing the problem.
• This pseudo-element had a default maximum width and height that was not visible in the inspector or CSS code.
• Setting max-width and max-height to none on the pseudo-element resolved the issue.

"It turns out that on this random hidden pseudo element that only exists on dialogue there's a Max width and a Max height and now we're good now it's fine."

• This quote reveals the solution to the problem: a hidden pseudo-element on the dialog had default max-width and max-height properties that needed to be overridden.

"How could we have ever known about this how could we have ever known the max width and Max height were being..."

• The quote reflects the narrator's frustration and the difficulty in identifying the cause of the issue due to the hidden nature of the pseudo-element's properties.

• The speaker discusses an issue with Chrome's user agent stylesheet, which applies default styles that are not visible in the developer tools' style tab.
• A maximum width and height are being applied to elements through a calculation, but this code is not written by the user nor visible in the Styles pane.
• The default styles are part of Chrome itself and are not exposed under the style tab, making it difficult to understand where certain styles are coming from.
• The speaker encountered a bug related to these hidden styles and had difficulty finding the solution due to the lack of visibility in Chrome's developer tools.

"The code for this is not in here; you can't scroll and find it. There is nothing in this view at all that indicates this max width and max height are being applied."

• This quote emphasizes the invisibility of certain styles being applied by Chrome's user agent stylesheet within the developer tools.

"This is coming from a user agent stylesheet, the dialogue internal dialogue in top layer. This comes from Chrome."

• Here, the speaker identifies the source of the mysterious styles as the user agent stylesheet, specifically from Chrome.

"This absolutely should be visible, specifically under here the same way we have the different states and selectors here."

• The speaker suggests that Chrome's developer tools should make these default styles visible for easier debugging and transparency.

"Chrome is adding this awful default that is part of the Chrome user agent stylesheet."

• The speaker expresses frustration over Chrome's default styles being added without visibility to the developers.

"Here are the default styles that get applied...the actual code that's committed to Chrome."

• The speaker points out the actual default styles applied by Chrome and where they can be found in the source code.

• The speaker acknowledges the help received from the community, specifically mentioning a user named wo and another named Keara, in identifying the hidden stylesheet issue.
• Screenshots from Firefox were used to illustrate the issue, as Firefox's developer tools displayed the user agent styles that Chrome did not.
• The speaker also tags a Chrome team member, Una, to bring attention to the problem and potentially influence a change in Chrome's developer tools.

"Yeah, huge shout out to wo for finding this for me. I had had this bug before and couldn't remember how I fixed it."

• This quote shows appreciation for community support in troubleshooting CSS issues.

"Keara just found the link for the source code in chromium for this so we can see the actual built-in CSS here."

• The speaker credits Keara for locating the source code, highlighting the collaborative effort to solve the problem.

"Someone tagged in Una from the Chrome team to take a look, and she also fairly assumed that that would exist inside of the tab as I showed."

• The speaker describes involving a Chrome team member, suggesting that even experts expect these styles to be visible in the developer tools.

• The speaker expresses hope that their negative experience will lead to improvements in Chrome's visibility of default styles.
• The issue led the speaker to seek help from Kevin Powell, a respected figure in the CSS community, known for his willingness to defend browser standards and provide educational content on CSS.

"I'm hopeful that due to my terrible experience here, they might actually change Chrome and make these things visible so it's easier to fix."

• The speaker hopes their difficulty will lead to changes in Chrome that make default styles more transparent to developers.

"I tagged in Kevin Powell. Kevin Powell, if you don't already know him, is like the CSS wizard on YouTube, phenomenal."

• The speaker seeks advice from Kevin Powell, acknowledging his expertise and influence in the CSS community.

• CSS box sizing property determines if the border affects the element's size.
• Traditionally, applying a border increases the size of the element due to the 'content-box' value.
• 'Content-box' makes the border act like a margin, altering the layout by increasing the element's size.
• A common hack was to use a transparent border to prevent layout shifts.
• 'Border-box' was introduced to include border and padding in the element's specified width and height, preventing layout changes when borders are toggled.
• Most developers set 'border-box' as a default to avoid layout issues.
• The CSS working group acknowledges that 'content-box' should not be the default and considers it a design mistake.

"I honestly wonder if it would be such a bad thing for new elements that have default padding and borders to just have a user agent styles to set the Box model to border-box."

This quote reflects the speaker's curiosity about the potential benefits of setting new elements with default padding and borders to use 'border-box' by default.

"Traditionally, when you apply a border, it affects the size of what's inside; the default value for box sizing is content-box."

The quote explains the traditional behavior of the 'content-box' model where adding a border increases the element's size.

"The hack that people used to do to fix this is they would have a transparent border when they had no border and then they would make the Border not transparent when they wanted it to show."

This quote describes the workaround developers used by applying a transparent border to maintain layout consistency.

"Border-box was added, and it tells the browser to account for any border and padding in the values you specified for the element's width and height."

The quote introduces 'border-box' as a solution that includes border and padding in the element's dimensions to prevent layout shifts.

"This means that when you have an element with a border that turns on and off, it doesn't affect the things outside of it, which is really, really nice."

This quote emphasizes the advantage of 'border-box' in keeping the layout stable when borders are toggled on and off.

"The actual CSS working group totally gets it too; this is a list of the things that they believe were mistakes in the design of CSS."

The quote indicates that the CSS working group is aware of the issues with the original box model design and considers it a mistake.

• The CSS working group has a list of design mistakes, including the default 'content-box' model.
• A 'strict mode' for CSS is proposed, similar to JavaScript's strict mode, to address these mistakes.
• Implementing a strict mode in CSS could break old websites that have workarounds for the current design.
• Browser compatibility and updating to a new standard would be challenging, making such a change unlikely.
• The speaker suggests that the list of mistakes is significant enough to warrant a dedicated video discussion.

"I'm beginning to think we're at the point where we need to do a hard change, similar to how we added strict mode in JavaScript."

This quote proposes the idea of introducing a 'strict mode' in CSS to correct design mistakes, drawing a parallel to JavaScript's strict mode.

"I think we need a strict mode in CSS, but getting all the other browsers to catch up is annoying enough that it's not going to happen."

The quote expresses the speaker's desire for a strict mode in CSS while acknowledging the practical difficulties of achieving browser consensus.

"One of the listed items here is box-sizing should be border-box by default; they understand that."

The quote points out that the CSS working group agrees with the speaker's view that 'border-box' should be the default box-sizing model.

"Also, table layout should be sane."

This brief quote suggests that table layouts in CSS are currently not sensible, indicating another area the speaker believes requires improvement.

"Honestly, the things in this list are so great that I should probably do a video of its own just about the content of the list of mistakes in design of CSS."

The speaker expresses enthusiasm about the potential for a video dedicated to discussing the CSS working group's list of design mistakes.

• Dialog elements have a default padding of 1em.
• The default border width is set to 'initial', which equates to 'medium' or 3 pixels in most browsers.
• The content width and height of a dialog are calculated by subtracting the padding and border from 100% of the viewport.
• The total reduction includes 2em of padding and 6 pixels of border, accounting for both sides of the dialog.
• The discussion highlights the frustration with the default box-sizing of 'content-box' as a historical CSS mistake.

"Dialogues have a default padding of 1 em and a border width of initial which maps to medium which is 3 pixels because that's the default border size in the browser."

This quote explains the default padding and border width of HTML dialog elements, which is a significant factor in calculating their size.

"Since box-sizing is content-box by default, the maximum total content width and height of a dialogue filling the viewport is 100% minus the padding and the Border."

This quote details how the default 'content-box' box-sizing model affects the calculation of a dialog's size on the screen.

• The CSS Working Group regrets setting 'content-box' as the default box-sizing value.
• Changing the default box-sizing to 'border-box' now would lead to confusion due to inconsistency across elements.
• Despite this, many developers override the default to 'border-box' for new elements.

"The fact that box-sizing defaults to content-box is a historical mistake the CSS working group seriously regrets."

This quote reflects the CSS Working Group's acknowledgment of 'content-box' as a suboptimal default setting for box-sizing.

"If user agents were to now change it and set it to border-box... it would lead to even more confusion if some elements were default content-box and others were default border-box."

This quote discusses the potential confusion that could arise from changing the default box-sizing for new elements to 'border-box' at this point in time.

• The need for developers to adjust the max width and height due to the 'content-box' default is considered a nuisance.
• Kevin suggests new elements should not require user agent styles for paddings and borders.
• 'Reset.css' is mentioned as a tool to cover default styling but is noted as inadequate in this case.
• A workaround is proposed to reset browser styles, including the backdrop pseudo-element, which is not covered by the universal selector '*'.

"Since we set box-sizing to border-box, the logical consequence is that I also have to adjust the max width and height to 100% instead of this awful calculation."

This quote explains the necessary adjustments developers make to element sizing due to the default 'content-box' box-sizing.

"You could literally set star, comma backdrop all unset in your CSS to delete all browser styles but it's kind of hilarious that you also have to add the backdrop because star doesn't cover the backdrop pseudo-element."

This quote provides a specific CSS workaround to remove default browser styles, highlighting the need to explicitly include the backdrop pseudo-element.

• The speaker expresses frustration with the complexity and inconsistencies in web standards.
• The term "tech debt" is used to describe the accumulation of historical design decisions in CSS.
• The speaker indicates that these complexities have caused delays in their own work.
• Better standards and more streamlined browser behavior are called for to improve the developer experience.

"The browser is such a mess guys, the only thing that's cascading in CSS is the tech debt and it has been cascading for what, 40 years now."

This quote conveys the speaker's frustration with the ongoing challenges and accumulated technical debt in CSS development.

"I literally spent 40 to 50 minutes just trying to fix it going through all my usual debugging steps entirely unable to figure out where this is going wrong and yeah, turns out this is a really bad decision that exists deep within Chrome."

This quote shares a personal anecdote about the time lost due to unexpected behavior in Chrome, emphasizing the impact of web standards on development time.