CODEWITHSUNDEEP
htmlcssgoogle-chromecss-transforms
Hasanavi
Hasanavi

Reputation: 8625

inline-block, italic text partially hides on Chrome with backface-visibility hidden

I'm working on inline-block element animation with italic font-style. Just noticed an weird issue on chrome browser. The text partially hides when applies backface-visibility: hidden

to reproduce this issue.

font-style: italic;
text-transform: uppercase;
display: inline-block;
backface-visibility: hidden;

I've made a little fiddle - http://jsfiddle.net/g817g9ph/3/

All other browser seems to work just fine. Any idea guys?

Upvotes: 0

Views: 378

Answers (2)

Ruskin
Ruskin

Reputation: 6171

I would argue that chrome is working properly here. The right hand part of the text is outside the bounding-box of the <a> (add a border and you will see) - so setting the backface-visibility to true in effect makes anything not on the front-face invisible ... so you loose the end of the text.

More info on the MDN Page on backface-visibility

It does beg the question as to why you are using the experimental css rule and suggests that Rvervuurt's answer to add padding is a great way out.

Upvotes: 1

Rvervuurt
Rvervuurt

Reputation: 8963

Adding a padding-right: 3px to the a.backface solves this, however I don't know how this will affect the rest of your project.

a.backface {
    padding-right: 3px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

Fiddle

It seems like the backface-visibility:hidden acts a the same as overflow:hidden, since everything that doesn't fit in the original div is hidden.

Upvotes: 1

Related Questions