Textify-js icon indicating copy to clipboard operation
Textify-js copied to clipboard

Default CSS transform overrides attribute values

Open kundralaci opened this issue 1 year ago • 1 comments

In the library's CSS file, there is a transform: translateZ(0) part:

/* fix safari custom kerning by adding a space after each character */
* {
  ...
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

This eventually overrides transform attributes on elements, for example, this svg path will render without the given rotation.

<path id="ray-2" d="M0 0L1 0L0.9659 0.2588Z" fill="url(#paint)" transform="rotate(30)"></path>

This can cause serious issues, as the library's CSS is too aggressive, and overrides attributes without noticing. Can you make it somewhat more focused on relevant elements? (Is this transform really needed?) If needed, you could use the following for example:

*[data-textify] {
  ...
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

kundralaci avatar Oct 11 '23 16:10 kundralaci

thanks @kundralaci for inform us to this issue, we will fix that fastly as possible. thanks for help

MAGGIx1404 avatar Oct 12 '23 05:10 MAGGIx1404