画面を右にスクロールすると、メインビジュアルの黒フィルタが見切れる

Question

いつもお世話になっております。

この度、メインビジュアルを少し暗く表示させるため、beforeでメインビジュアルの上に黒色のフィルターを設置しています。
通常は正常に表示されるのですが、
画面の横幅を980pxに設定しており、それよりも幅が狭くなったら左右スクロールが出るようにしてあります。

そうすると、スクロールを右に移動させ、スクロールで隠れている部分を表示させてみると
黒色のフィルターが外れています。

これはどういった理由でしょうか？
スクロールで隠れている部分にも黒フィルターを適用させたいのですが、、

.Main-visual {
	background-image: url("../image/main_image.jpg");
	background-size:cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 540px;
	background-position: left ;
	clear: both;
}


.Main-visual::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  top: 100px;
  right: 0;
	left: 0;
  bottom: 187px;
  content: ' ';
	clear: both;
	width: 100%;
	height: 540px;
}

↓右にスクロールすると、黒フィルターが外れてる。

その他必要情報あれば追記致します。

Answer 1

以下をお試しください。

.Main-visual {
  background-image: url("../image/main_image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 540px;
  background-position: left;
  clear: both;
  position: relative; /* 追加 */
}

---

以下追記
どういった理由かも知りたいようなので。
親要素（この場合.Main-visual）のpositionの初期値はstaticです。
http://www.htmq.com/style/position.shtmlの説明を借りると

親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

ということなので、この場合.Main-visual::beforeの基準はウィンドウ全体ということになると思います。

---

以下さらに追記
基準をウィンドウ全体から.Main-visualにしたことで、上下の位置の指定も変更しなくてはならないかもしれません。
.Main-visual全体に色を重ねたいのであればtop:0;,bottom:0;とか。
ヘッダー部分用に重ね色の開始位置を下げている可能性があるので念のため補足しておきます。