Odd behavior of :first-letter in Chrome

Question

Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox.

p.unindent {
    color: #555555;
    background-color: #e6e6e6;
    border-bottom: 1px solid #d3d3d3;
    border-left: 1px solid rgba(0,0,0,0);  /* so things are the same size so we don't develop scroll bars*/
    border-right: 1px solid rgba(0,0,0,0);
    border-top: 1px solid rgba(0,0,0,0);
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 25px;
    padding-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
}

p.unindent:first-letter {
    margin-left: -20px;
}

p.unindent.menuitemon {
    color: #e6e6e6;
    background: #555555;
    border: 1px solid #222222;
    border-radius: 4px;
}

Can someone point out what I might be doing wrong that's causing this?

Answer 1

You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.

Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:

p.unindent {
    text-indent: -20px;
    /* ... */
}

/*
p.unindent:first-letter {
    margin-left: -20px;
}
*/

Answer 2

.menutitle {
    /* font-size: 1.2em; */
    font-weight: bold;
    /* font-style: italic; */
    margin-left: 0;
}

the moment i commented those two lines it worked properly

EDIT

nop it only solved half the problem

Codepen

Answer 3

The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)

You must set pseudo's parent to

.parent {display:block}