KPC
Kevin Powell - Communitythethingisback

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.
ἔρως•18d ago
where can we seen this running?
T
thethingisback•18d 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.
ἔρως•18d ago
cant you make a minimal codepen that shows the problem?
Want results from more Discord servers?
Add your server
More Posts
React + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgCol