Prevent overlay of semi-transparent background on text elements - html

Question

So, there is a paragraph <p> with an inline element <span> that has a semi-transparent background rgba(0,0,0,0.5). It contains more than one line of text. To remove the gap between backgrounds on each line, padding-top, padding-bottom is used.
For example, using Open Sans 16px with 26px line-height and 2px padding -top -bottom, it renders good in Webkit desktop browsers (without gaps or overlays) but has overlays in mobile browsers (Chrome).
It could be done by applying rgba(0,0,0,0.5) to a block element (<p>), but in that case the background will fill all the block, and I need it to be partially applied to some text inside a block. Not using padding is also not an option — gaps between lines with background look bad.
div {
background: linear-gradient(to bottom, #00b3e3 0%, #2c5697 100%);
color: #fff;
font-family: Helvetica;
font-size: 16px;
line-height: 24px;
}
p {
padding: 50px;
}
span {
background-color: rgba(0,0,0,0.3);
padding: 5px 0;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Playing with padding gives different results in different browsers.

Answer 1

I know you said non-transparent background is not an option, I'd still argue the simplest solution is actually to go with a solid color background that is visually identical to your non-transparent tint.
For instance, rgba(0, 0, 0, .5) renders as rgb(127, 127, 127), which makes sense, because 50% transparent black equals to 50% gray visually.
Even if you're using a colored background, say, rgba(25, 150, 90, .5), it can easily be converted into a solid color—in this case, rgb(139, 203, 173).
See the image for reference.
Fiddling with pixel dimension discrepancies between browser rendering engines can suck up your hours.

Answer 2

The bellow seems to be buggy on Fiferox but works fine on chrome
One idea is to use multiple background where the second one will be the same as the main container but you have to consider background-attachment:fixed to make both of them at the same position to create the illusion of the same one.
I am using different colors than your exmpale to better see the result
div {
background: linear-gradient(to right, red, blue) fixed;
color: #fff;
font-family: Helvetica;
font-size: 16px;
line-height: 24px;
}
p {
padding: 50px;
}
span {
background:
linear-gradient(rgba(0,255,0,0.3),rgba(0,255,0,0.3)),
linear-gradient(to right, red, blue) fixed;
padding: 5px 0;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>