Lighthouse 'Avoids old CSS flexbox' audit fails
See original GitHub issueCan you reproduce the problem with latest npm?
Yes.
Description
The current autoprefixer options prefixes flexbox with old CSS rules, which fails the following Lighthouse audit: https://developers.google.com/web/tools/lighthouse/audits/old-flexbox
Expected behavior
Lighthouse audit ‘Avoids old CSS flexbox’ should pass.
Actual behavior
Lighthouse ‘Avoids old CSS flexbox’ audit fails.
Expanding ‘More information’ in the audit reveals that autoprefixer has added display: -webkit-box;
and display: -ms-flexbox;
to the compiled CSS.
Reproducible Demo
create-react-app my-app && cd my-app
- Add
display: flex;
tobody
selector insrc/index.css
. npm start
ornpm run build
and open local page in browser.- Run Lighthouse audit.
Issue Analytics
- State:
- Created 7 years ago
- Comments:13 (13 by maintainers)
Top Results From Across the Web
Content is not sized correctly for the viewport - Stack Overflow
I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit.
Read more >Lighthouse: Optimize website speed - Chrome Developers
Audits. Disabling a category prevents the Audits panel from running those audits, and excludes those audits from your report.
Read more >HubSpot COS(CMS), meet Lighthouse | by Mike Rizzo - Medium
We've compiled some recommendations for modernizing your web app and avoiding performance pitfalls. These audits do not affect your score but are worth...
Read more >lighthouse/changelog.md - UNPKG
Lighthouse 7.0 includes a number of programmatic breaking changes and new audits in the **Accessibility** and **PWA** categories. There were some improvements ...
Read more >lighthouse | Yarn - Package Manager
Automated auditing, performance metrics, and best practices for the web. google, chrome, devtools. readme. changelog. 9.6.8 (2022-10 ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ll give it a go
Please help beta test the new version that includes this change! https://github.com/facebookincubator/create-react-app/issues/2172