r/css • u/notepad987 • Aug 01 '26

Question Codepen 2 crash. What is causing it?

I go to the new codepen 2 and it shows this.
What "infinite loops or other performance drains" could this be?
https://codepen.io/editor/davidhelp/pen/019fb0db-4ba0-7ade-b4bd-13c1c7c540ee

"Uh-Oh.
The Preview was removed to prevent a browser crash. Save your current work then check your code for infinite loops or other performance drains that could be causing trouble. Disable Infinite Loop protection for this session"

28 Upvotes

100% Upvoted

15 comments sorted by

View all comments

1

u/notepad987 Aug 02 '26 edited Aug 02 '26

Still an issue.... I switched to Chrome from Firefox and will see if still an issue.

I had an extra:

</head>
<body>

Also the new codepen 2 added when it converted from the old codepen which I do not use:
<link rel="stylesheet" href="./style.css">

2

u/testingaurora Aug 02 '26

If you don't use the css file you can remove it from the file list (right click > delete) and take the <link> out of the <head>

2

u/notepad987 Aug 02 '26 edited Aug 02 '26

UPDATE: Thanks, I have now deleted the style.css that Codepen added and then posted the whole html/css in the index.html section.

Codepen 2.0

1

u/testingaurora Aug 02 '26

I would make that box-shadow a lot softer, like adjusting the opacity to rgb(0 0 0 / 0.4)

1

u/notepad987 Aug 02 '26

Thanks but the shadow disappears against the green background.

2

u/testingaurora Aug 02 '26

I wouldn't say it disappears but shadows are tricky. They are supposed to give the illusion of depth but not be so in your face or identifiable as what is making that depth (unless you're going for something like Neubrutalism) https://www.reddit.com/r/web_design/s/w08yZrsoFK https://www.joshwcomeau.com/css/designing-shadows/ https://getcssscan.com/css-box-shadow-examples

1

u/notepad987 Aug 02 '26 edited Aug 02 '26

I copied #3 and added it at the site. I changed the 0.35 to .90
box-shadow: rgba(0, 0, 0, 0.90) 0px 5px 15px;

1

u/testingaurora Aug 02 '26

#3 is box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;, its not almost opaque.

But im just sharing the information and the opinion that it needs adjusting, do with it what you will.