Rotation 90deg make embedded view object blur

When I rotate my embedded view in perspective most of the time the inside component get blured.
It happen at 90deg. The inside object of embedded view is label component and interestingly if I rotate a label in view itself, it doesn’t get blured at all.

Hi Nader,

We appreciate these continuing reports, it helps us fix issues quickly. We’ll take a look and see if there’s a bug we can address.

I would ask future reports, please state/provide as much info as you can relating to:

  1. Which types of components/containers are involved? Are all embedded views showing this behavior, or just some?
  2. Any special fonts or other styling involved that would be useful to know?
  3. Which browser, and browser version
  4. Which version of Ignition/Perspective
  5. Which language/locale is being used for text?

And last be not least: screenshots/gifs and project exports that reproduce the issue are extremely helpful and will help speed up getting an issue diagnosed and resolved – especially right now while we’re adjusting to new workflows forced on us by being 100% remote.

Hello Nader,
In addition to the questions Perry is asking (a screenshot would be especially useful), does adding imageRendering: pixelated to the style of either the embedded view or the component affect the blurriness? imageRendering: pixelated should only affect images, but it’s worth a try.

Hi Paul
Sorry for lack of details.
1- I use xy coordinate that includes label and svg shape for embedded view.
2 - no I only use default roboto don’t
3 - I use chrome lasted version
4 - v8.0.6
5 - EN/US
I should noted if I get blured at 100% zoom level it may get better result in 110% and vice versa.

Untitled (3.4 KB)

Hi Perkins
I test the css3 pixelated in both container and object but doesn’t effect.

Hi Paul
Can you replicate it on your side?

Nader, I’ve downloaded your project and constructed a series of embedded views. To my eye rotate 90 appears just as sharp as the non-rotated ones. While researching your issue I stumbled upon this stack overflow thread: css - Blurry text on transform:rotate in Chrome - Stack Overflow

The thread suggested adding a perspective css property to force Chrome to use GPU accelerated rendering. It didn’t seem to make a difference in my example, but it might help you. Another thing to try if you’re in Windows is the adjust the “ClearType” text, this affects Window’s subpixel rendering of fonts and may result in cleaner text. I hope this helps.

1 Like

Thanks for support. It seems your monitor has Hi DPI like 3k or 4K LCD. I test this in mobile and 3K monitor and it seems fine for me but for full HD 1920*1080 monitor it blured. Can you confirm it?
I also find if I rotate the main object at 100% zoom it will blured at 110% and vice versa. So different broswer zoom level cause this.
I also read the stackoverflow thread and it did all suggestion but not work for me.
Any way it most likely browser fault and I had to create separated 90deg if my valve. :frowning: