Inline background styling lost when viewing on mobile

[ghost]

I have inline-styling applied to the div that I want the parallax to show up, and for desktops this works fine (to overlay a linear gradient over the image to help text inside to show).

However, when viewing on mobile (where the parallax effect is gracefully replaced with a static image), the linear gradient isn't applied, as the inlien styling is re-written to show the image.

How can this be overcome?

Original element:

<div id="gallery" class="text-center frontpage-block" data-parallax="" data-src="/wp-content/uploads/Bella-Vou-Edited-143-LC-1920x640.jpg" style="background:linear-gradient(to right, rgba(97,80,77,0) 0%, rgba(97,80,77,.9) 50%, rgba(97,80,77,0) 100%);">
    <div class="container">
        <h2>Take a <span>look</span> around</h2>
        <p>Our virtual tour lets you see what's it like stepping into our beautiful clinic.</p>
        <a href="/gallery/" class="btn btn-primary">
            <span class="fa fa-fw fa-camera"></span> View our gallery
        </a>
    </div>
</div>

On mobiles this is displayed as:

<div id="gallery" class="text-center frontpage-block" data-parallax="" data-src="/wp-content/uploads/Bella-Vou-Edited-143-LC-1920x640.jpg" style="background: url("/wp-content/uploads/Bella-Vou-Edited-143-LC-1920x640.jpg") center center / cover;">
    <div class="container">
        <h2>Take a <span>look</span> around</h2>
        <p>Our virtual tour lets you see what's it like stepping into our beautiful clinic.</p>
        <a href="/gallery/" class="btn btn-primary">
            <span class="fa fa-fw fa-camera"></span> View our gallery
        </a>
    </div>
</div>

[ghost]

Why has this issue not been addressed? The problem still exists, this was back in October, coming up to four months ago.

Why is no one reading these issues!?

[leqnam]

same problem here, but temporary fix as here #67 (comment)