Prevent overlay of semi-transparent background on text elements

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.