Kevin Powell - Community•7mo ago

Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?

GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several really with this scenario, but for now this one in particular:

  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >

  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >

As you can see I am conditionally assigning classes. focused_container , in my CSS, transform: scale()'s this element slightly larger.

.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}

.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}

It's working, but when it scales up, the elements inside of it become blurry, at least on Chrome. Everything looks fine in Firefox. Slightly burry on Safari too. Is there a known way to fix this? You can see I've been messing around with perspective and transform:translateZ(), in addition to filter: contrast(), but none have worked so far.

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

3 Replies

ἔρως•7mo ago

where can we seen this running?

thethingisbackOP•7mo ago

here we go: https://github.com/nnall/hm-frontend-Nick.git

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

ἔρως•7mo ago

cant you make a minimal codepen that shows the problem?

Gaming

Programming

Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?