Upgrade from 2.5.2 to 2.5.3 breaks Chrome 87 support

[NiklasPor]

Description

When I upgraded from @chakra-ui/react@2.5.2 to 2.5.3, I expected the styles to remain the same, but the css reset broke and the layouting of the site was not working anymore.

This is probably due to the addition of :where() clauses inside the css reset: https://github.com/chakra-ui/chakra-ui/blob/f5b1a3569fd0c654897d2397b3d0bd4677783fa7/packages/components/css-reset/src/css-reset.tsx#L62

---

Effects

Looks like this in new chrome versions, or with @chakra-ui/react@2.5.2:

Looks like this in Chrome 87 with @chakra-ui/react@2.5.3 (and all versions afterwards):

This is just a simple example of the not working reset, box-sizing etc. also breaks and kills the layouting. That being said, if Chrome 87 is simply not supported by chakra ui (which I'd totatally. understand), I'll just stay on this older version – sadly I'm writing an integration for another software, which is locked to this old chrome version.

Some point where developers could read up on supported versions would also be great 👀

Thanks for you awesome work on chakra 👋

Link to Reproduction

https://codesandbox.io/s/silly-water-9t6745?file=/src/index.tsx

Steps to reproduce

1. Use Chrome 87
2. Open the sandbox page
3. Inspect the incorrect css reset on the result page

Chakra UI Version

2.5.3

Browser

Google Chrome 87

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response

[tnfAngel]

any updates on this? i have the same problem

[kringt06]

一样

[tnfAngel]

This break the whole ui in my case, where i use a webview on Android devices, and the native webview is not that updated and causes this on some devices

[kringt06]

:where() 伪类函数在 CSS 中是一个相对较新的特性。它首次出现在 CSS Selectors Level 4 规范中。这个伪类函数的目的是提供一种选择器，它与 :is() 类似，但在计算特异性时，:where() 的特异性总是为零。

至于它在各个浏览器中的支持情况，:where() 伪类开始得到支持的具体版本如下：

• Chrome: 从版本 88 开始支持（2021年1月发布）。
• Firefox: 从版本 78 开始支持（2020年6月发布）。
• Safari: 从版本 14 开始支持（2020年9月发布）。
• Edge: 从基于 Chromium 的版本 88 开始支持（2021年1月发布）。

请注意，这些版本信息是根据我最后更新的数据（截至2022年1月）提供的。如果需要最新的浏览器支持信息，建议查看最新的浏览器文档或使用在线工具如 Can I Use。

[kringt06]

我正在尝试禁用官方的reset css，改为自己手动引入旧版本的reset css

[kringt06]

CSSReset use "@chakra-ui/css-reset": "2.0.10",

[LinKassem]

CSSReset use "@chakra-ui/css-reset": "2.0.10",

Nice suggestion. However it did not work for me on chrome browser version 73. What worked for me is creating a css file with part of the content of chakraui's resetcss.js file after removing the :where selector. & then import this file before the global.css file. Not the best solution but it works.

`/ Part of chakra ui's cssReset.js file without the :where css selector. To have the cssReset compatible with older browser versions /

html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; touch-action: manipulation; }

body { position: relative; min-height: 100%; margin: 0; font-feature-settings: "kern"; }

, ::before, *::after { border-width: 0; border-style: solid; box-sizing: border-box; word-wrap: break-word; }

main { display: block; }

hr { border-top-width: 1px; box-sizing: content-box; height: 0; overflow: visible; }

pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1em; }

a { background-color: transparent; color: inherit; text-decoration: inherit; }

abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }

b, strong { font-weight: bold; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button::-moz-focus-inner,

[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

fieldset { padding: 0.35em 0.75em 0.625em; }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

progress { vertical-align: baseline; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; }

input[type="number"] { -moz-appearance: textfield; }

input[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

input[type="search"]::-webkit-search-decoration { -webkit-appearance: none !important; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details { display: block; }

summary { display: list-item; }

template { display: none; }

[hidden] { display: none !important; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }

button { background: transparent; padding: 0; }

fieldset { margin: 0; padding: 0; }

ol, ul { margin: 0; padding: 0; }

textarea { resize: vertical; }

button, [role="button"] { cursor: pointer; }

button::-moz-focus-inner { border: 0 !important; }

table { border-collapse: collapse; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; }

img, video { max-width: 100%; height: auto; }

[data-js-focus-visible] :focus:not([data-focus-visible-added]):not([data-focus-visible-disabled]) { outline: none; box-shadow: none; }

select::-ms-expand { display: none; }`

[segunadebayo]

Please upgrade to the latest version.