Lunny
Lunny

Reputation: 852

Firefox border messed up after transform

This happens on firefox, where I have a border on an element and if I transform the element, the border becomes all messed up. It is more noticeable on monitor screens.

<div>
  Hello World
</div>

div {
  border: 1px solid black;
  transform: scale(0.625, 0.625) translate(50px, 50px);
}

https://jsfiddle.net/tcspd7za/1/

Upvotes: 0

Views: 169

Answers (1)

Nisarg
Nisarg

Reputation: 1641

A dirty work around might fix your issue. Try add this: -moz-transform: scale(.9999);

div {
  border: 1px solid black;
  transform: scale(0.625, 0.625) translate(50px, 50px);
  -moz-transform: scale(.9999);
}

Upvotes: 1

Related Questions