Position of background stripes are not synchronized to lines(Coy theme)

[tousei-seiso]

The Coy theme draws striped background color for improve visibility.

These striped backgrounds should have same height to the line height. But, it seems to have a little different value from line height, and it gradually shifts the position the stripes are drawn.

Sample post is below(it reproduced in both upper and lower source code boxes) :
http://red-souls.jp/ichounoki/rnote/software/20181216_042333932863.htm

Initially (first row, second row, ...), the light color background is in even row, the dark color background is in odd row, but it gradually deviates in the lower rows, the position is reversed.

[RunDevelopment]

This bug seems to be specific to Chrome. FF and Edge do not show this bug.

---

prettify.css overwrites the font-size property of code elements which causes this drift.
Removing line 80 in prettify.css or adding a line font-size: inherit; in line 38 in prism.css will solve your problem.

This is not a general fix.

It seems like every font-size which is not a multiple of 8px will cause this behavior.

---

Update:
This is definitely a bug of Chrome. The font sizes at which the lines will go out of sync depend on both your current zoom-level and your system's DPI scaling settings.

But it seems that choosing a multiple of 2px will hide this bug on 100% DPI scaling with no zoom.

[tousei-seiso]

This is definitely a bug of Chrome. The font sizes at which the lines will go out of sync depend on both >your current zoom-level and your system's DPI scaling settings.

But it seems that choosing a multiple of 2px will hide this bug on 100% DPI scaling with no zoom.

Thanks to the comment. I confirmed that IE11, Edge, Fire Fox shows the stripe correctly.

Removing line 80 in prettify.css or adding a line font-size: inherit; in line 38 in prism.css will solve your problem.

Unfortunately, I tried both of above but nothing changed with Chrome. I sent the feedback to Chrome developer from Chrome/menu/help.