nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.73k stars 1.65k forks source link

Visual glitch in non-rounded dark dialog #455

Open srknzl opened 3 years ago

srknzl commented 3 years ago

Describe the bug Visual glitch in dark dialogs (not rounded ones)

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://nostalgic-css.github.io/NES.css/
  2. Click on "open dark dialog"
  3. See glitch

Expected behavior

Screenshots

how it is right now:

image

what it should look like:

image

Environment:

Suggestion(s) for fixing this issue This css block causes this glitch, I don't know what it does.

https://github.com/nostalgic-css/NES.css/blob/master/scss/elements/dialogs.scss#L26

Disabling "position: absolute" in dev tools fixes the glitch

Additional context

yslius commented 2 years ago

I think the aim was to make it similar to Container.is-dark.

image

scss\elements\containers.scss

&::after {
  position: absolute;
  top: -$border-size * 1.8;
  right: -$border-size * 1.8;
  bottom: -$border-size * 1.8;
  left: -$border-size * 1.8;
  z-index: -1;
  content: "";
  background-color: $base-color;
}

But, since it is difficult to realize on the dialog, I think that absolute is not necessary. I sent a pull request for this matter. https://github.com/nostalgic-css/NES.css/pull/474