Как исправить неправильное отображение блока c background fixed и transform?

Question

[Bleno]

Задача простая: у блока есть задний фон (картинка), требуется сделать его неподвижным (background-attachment: fixed) и при этом, чтобы блок, независимо от его ширины, был по центру.

Вот как получилось у меня:

<div class="cover-wrapper">
    <div class="cover"></div>
</div>
<style>
    .cover-wrapper {
        position: relative;
    }
    .cover {
        background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("https://i.imgur.com/1CjllnR.jpg");

        background-attachment: fixed;
        background-size: cover;

        width: 50%;
        height: 800px;


        position: relative;
        left: 50%;

        transform: translate(-50%, 0);
    }
</style>

Если ширина блока 50%, то отображается всё отлично: https://jsfiddle.net/dg0osyah/

Но, если ширина более 50%, то блок не по центру: https://jsfiddle.net/yubvmxeL/

Самое интересное, что если background-attachment выставить scroll, то всё будет работать как ожидается: https://jsfiddle.net/8vmyo9s6/

Если убрать transform в случае с background-attachment: fixed, то блок не будет прижат к левому краю, но тогда и не будет по центру, так что я подозреваю, что происходит что-то вроде конфликта background-attachment: fixed и transform

Comments

[pavel_mol]

какая ширина блока нужна?

Answer 1

[kryamk]

А почему бы с помощью flex не выровнять по центру?

Answer 2

[Евгений Щербаков]

Если я правильно понял, что Вам нужно, то вместо left и transform просто поставьте margin: 0 auto;