CODEWITHSUNDEEP
cssfirefoxcss-transforms
michaPau
michaPau

Reputation: 1648

Transformation on background-clip(ed) text is applied two times in Firefox

Transforming a header text element which has its css property background-clip: text; set - is applied 2 times on Firefox (Version 90.0.2).

The same css runs as expected in Chrome.

You can see in the example below that the element (which has a 1px border) is rotated 45degs but the the clipped text is rotated again (to 90 degs) - in Firefox

.center-text {
  margin-top: 25vh;
  text-align: center;
}
.heading-transform {
  background-image: linear-gradient(to right, #ff0066, #0066cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid #000;
}

.heading-transform:hover {
  transform: rotateZ(45deg);
}
<div class="center-text">
  <h2 class="heading-transform">
    Should rotate around z only 45degs
  </h2>
</div>

This only happens when the background-clip: text; is set.

Any possible workarounds to prevent that?

Upvotes: 2

Views: 124

Answers (1)

František Voj&#225;ček
František Voj&#225;ček

Reputation: 174

This is obviously a bug and I recommend reporting it to Mozilla

This behavior can be easily avoided! Simply transform any parent element.

.center-text {
  margin-top: 25vh;
  text-align: center;
}
.center-text:hover {
  transform: rotateZ(45deg);
}

.heading-transform {
  background-image: linear-gradient(to right, #ff0066, #0066cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid #000;
}
<div class="center-text">
  <h2 class="heading-transform">
    Should rotate around z only 45degs
  </h2>
</div>

Interactive Code

In case .center-text cannot be transformed, wrap h2 in another container.

Upvotes: 1

Related Questions