CSS Transform on Chrome shows element edges

Question

I'm trying to apply a scaleX transform on a div that contains spans. The transform is working just fine but when it is not unity, the edges of the spans do not seem to touch resulting in a visible line between them.

Here's an example

and here is a fiddle:

  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A</span><span class="cell">B</span><span class="cell">C</span><span class="cell">D</span>
      </div>
    </div>
  </div>

.container {
    background-color: black;
    width: 350px;
}
.page {
    padding: 10px;
    transform: scaleX(1.2);
}
.line {
    padding-left:25px;
}
.cell {
    background-color: white;
    color: black;
    font-size: 100px;
}

Change the value of the scaleX transform to 1.0 and the edges disappear. change to 1.1 and then 1.2 and you can see the transform otherwise seems to work nicely. Seems to be a Chrome thang - firefox and edge don't exhibit the problem. I'm fairly new to CSS so any advice is welcome.

score 1 · Answer 1 · answered Sep 07 '17 at 05:02

1

Add the following to your cell

-webkit-backface-visibility: hidden;

answered Sep 07 '17 at 05:02

iSZ

682
5
10

I tested this idea with latest Chrome on Windows and it seems that the browser now recognizes the back-face-visibility style (not -webkit any longer). However it doesn't seem to solve this problem. Do I need to apply some other style along with it perhaps? – jimwe Sep 07 '17 at 18:01
@jimwe changing your transform to scaleX(1.2) perspective(0.01px) works in testing, but there is a side effect of slightly blurry text. – iSZ Sep 08 '17 at 01:37

Pato Salazar · Answer 2 · 2017-09-07T12:27:19.983

0

So this is a long standing quirk for inline elements. A very pragmatic solution is to remove the closing tags for your <span> tags (all browsers support this)

Check also this link How to remove the space between inline-block elements?

Finally you can use Flexbox to fix this problem

.container {
  background-color: black;
  width: 350px;
}
.page {
 padding: 10px;
 transform: scaleX(1.3);
}
.line {
  padding-left:25px;
}
.cell {
  background-color: white;
  color: black;
  font-size: 100px;
}

  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A<span class="cell">B<span class="cell">C<span class="cell">D
      </div>
    </div>
  </div>

edited Sep 07 '17 at 12:27

answered Sep 07 '17 at 05:08

Pato Salazar

1,447
12
21

Thanks for this idea of removing the end tag on spans. It works great! However I don't see listed as an optional tag here: https://www.w3.org/TR/html5/syntax.html#optional-tags so I'm hesitant to use this option. I'm playing with Flexbox but haven't quite hit on the right combination yet. When I find a working flex model, I'll post it here. – jimwe Sep 07 '17 at 18:08
Sure.. it is a bit hacky... my understanding is that browser can deal with tags with no closing because the infer that the next element cannot exists without closing the previous one. It is in XHTML where XML force you to actually close the tag. But if you find a flexbox, let me know.. I thing that is your cleaner solution. Good Luck – Pato Salazar Sep 07 '17 at 18:37

CSS Transform on Chrome shows element edges

2 Answers2