CSS transform property is not working properly

Question

here is my HTML and CSS code for showing texts in two blocks in dl element I tried to change my ▶ symbol to a different shape using css transform scale property. But in some browser only show the triangle in first column ? Why it is like that ? also I tried webkit , moz prefix for rendering the code in all browser

Google Chrome old version

Google Chrome Latest Version

HTML

dl.textAdTitles {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  list-style-position: inside;
  margin-left: 5px;
  margin-right: 20px;
}

dt {
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textAdTitles dt:before {
  font-family: Roboto,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  width: 12px;
  height: auto;
  text-align: center;
  text-decoration: none;
  margin-right: 0px;
  vertical-align: top;
  display: inline-block;
  content: ' ▶ ';
  font-size: 10px;
  color: #000000;
  font-weight: bolder;
  transform: scale(0.5,1);
}

<table>
  <tr>
      <td>
           <dl class="textAdTitles">
                <dt height="10%" style="">
                    Sample text 1
                </dt>
                <dt height="10%" style="">
                    Sample text 2
                </dt>
                <dt height="10%" style="">
                    Sample text 3
                </dt>
                <dt height="10%" style="">
                    Sample text 4
                </dt>
                <dt height="10%" style="">
                    Sample text 5
                </dt>
           </dl>
      </td>
  </tr>
</table>

Answer 1

It is working in chrome. Only problem is in class .dt you are using overflow:hidden. Just remove that and it works as expected.

Here is the final code:

dl.textAdTitles {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  list-style-position: inside;
  margin-left: 5px;
  margin-right: 20px;
}

dt {
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textAdTitles dt:before {
  font-family: Roboto,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  width: 12px;
  height: auto;
  text-align: center;
  text-decoration: none;
  margin-right: 0px;
  vertical-align: top;
  display: inline-block;
  content: ' ▶ ';
  font-size: 10px;
  color: #000000;
  font-weight: bolder;
  transform: scale(0.5,1);
}

<table>
  <tr>
      <td>
           <dl class="textAdTitles">
                <dt height="10%" style="">
                    Sample text 1
                </dt>
                <dt height="10%" style="">
                    Sample text 2
                </dt>
                <dt height="10%" style="">
                    Sample text 3
                </dt>
                <dt height="10%" style="">
                    Sample text 4
                </dt>
                <dt height="10%" style="">
                    Sample text 5
                </dt>
           </dl>
      </td>
  </tr>
</table>