2

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Eric
  • 180
  • 1
  • 10
  • 3
    This is hilarious. I wasn't seeing the issue in Chrome 40, realized there might have been an update, updated to 41, and now I see it. [This will never get old, I tells ya.](http://stackoverflow.com/questions/28109129/is-this-a-chrome-css-bug/28109276#28109276) – BoltClock Mar 07 '15 at 03:40
  • Reproduced on Chrome 41. Looks like a bug to me. – TylerH Mar 07 '15 at 03:49
  • bug in chrome however, setting `vertical-align:top;` in :first-letter class also works. – gp. Mar 07 '15 at 03:59

3 Answers3

4

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;
}
*/
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

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}
maxkuku
  • 188
  • 4
  • 7
0
.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

Fuzail l'Corder
  • 90
  • 1
  • 7