I’m nearing the end of the first phase of a website redesign, teaching myself new CSS, and sprinkling in some JS. Of the things I’m learning, I’m also rediscovering some old Safari linear-gradient issues and seeing some new Safari positioning bugs.

You can follow along if you view the CodePen titled “color-scheme, light-dark, Safari bug”.

The original point of the above pen is to verify linear gradient issues with Safari.

Webkit-based linear-gradient issues are well documented, they behave differently because of the transparent color values. You can see this by switching the theme mode from light to dark, or dark to light. I keep running into linear gradient issues in Safari because I infrequently use them with transparent values and forget they’re still an issue.

CodePen screenshot after switching pen from light mode to dark mode, showing linear gradients that are not ideal
CodePen screenshot after switching the theme mode from light to dark, showing linear gradients that are not ideal. It also shows that the aspect ratio isn’t a square as it should be.

Try the above pen in Firefox or any Chromium browser and the linear gradients are consistently working when switching between dark and light mode.

I found 3 more issues having created this:

  1. In .square, Webkit doesn’t seem to center things consistently using just place-items: center. I am forced to add place-content: center to make the content “this is a square” center consistently with the other modern browsers
  2. aspect-radio: 1 / 1 doesn’t actually work right for the content area of .square. It’s elongated into a rectangle.
  3. Adding position: fixed to .square, which is already centered using the place-* rules breaks the positioning only on Webkit. I am forced to use older positioning methods, i.e. left, top, and transform.