web-dev-qa-db-ja.com

CSSフィルター反転ルールの固定位置を破るChrome 68

私はChrome 68です。

_<body>_にfilter: invert(xxx);があるときはいつでも、fixedとして配置されたものは画面にくっつかず、すべてとともにスクロールします。

filter: invert(xxx);のデモ

_body{
  height: 8000px;
  filter: invert(0.85);
}

div{
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}_
_<div></div>_

filter: invert(xxx);のないデモ

_body{
  height: 8000px;
}

div{
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}_
_<div></div>_

編集：Chrome 67では正常に動作しますが、Chrome 68。では動作しません

cssgoogle-chromecss-positioncss-filters
16
Zenoo

Google Chrome 68のバグのようですが、<html>要素の代わりに<body>要素を使用してこれを解決できます。

html {
  height: 8000px;
  filter: invert(0.85);
}
div {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}
<div></div>

注：topとleftのみが0に設定されている場合、要素はスクロール時に固定されたままになりません。ただし、bottom: 0;を追加すると、要素は再び修正されたままになります。

また、更新前（Chrome 67）と更新後（Chrome 68）のスタイルを比較し、同じ例で次の値を変更しました（filterを使用）。

+---------------+-----------------+
| Chrome 67     | Chrome 68       |
+---------------+-----------------+
| bottom: 97px; | bottom: 7898px; |
| right: 526px; | right: 510px;   |
+---------------+-----------------+
13
Sebastian Brosch