css - Font Pixelate Issue in Chrome (HTML5/CSS3) -

I have an issue that the text is pixelized when 2D Scale CSS Transform is applied. (I only tested in Chrome. I will cross-browsing later, so you do not need to test it on different browsers.)

css

  .versus_block_hover {-webkit-transform: scale (1.2.1.2)! Important; Webkit-transition: 50ms 0ms! Important; Z-index: 1100 important; Border-width: 1px; Border color: # 000; Border style: solid; }   
 Javascript code  
  $ ('.vb_blocks'). Hover (function {$ (this) .addClass ('versus_block_hover'); $ (This) .Parent () .css ('z-index', '1100');}, function () {$ (this) .removeClass ('versus_block_hover'); $ (this) .Parent (.) CSS ('Z-index', '0');});   
 I know that CSS uses bitmap operation during CSS conversion for acceleration, however, when I tested it in jsfiddle, it was not pixelated. In the face, it seems that when the infection is done, then Chrome repeats one of the text again.  
 See this  Task  Hover over a box (I put all CSS elements from my actual site.)  
  
 And, it is  an actual site that has a problem . (Hovering any block, then you can see pixelated fonts when expanded)  
  
 Anyone have an idea to fix this? It's fine that you can fix it directly on your JSfield.   
 
 
 The problem looks like this:  
 So what really triggers the problem , It occurs when the element is provided as a composite layer on the unequal coordinates. If you can enable the  composited render layer limitations  option in  chrome: // flags , then you can see that div becomes a composite layer in your first JSF example. When the transition is on, the text is blurred, once the transition is completed it is no longer composite, and the text becomes clear (see this modified based on where the border is easy to spot :)  
 In your second JSW example example, the text remains blurred even after the transition is complete, because it is still a composite layer (possibly on unequal coordinates), it is due to these nested and underyoid conversions (one Element which is above a composite layer, also becomes a composite layer). See Modified Bela: Disabling all changes using:  
  * {-webkit-transform: translateX (0)! Important; }   
 Then only the result of the hovered element is to balance. If you have enabled the  Composite Render Layer Layers  option, you should see that all the red / brown borders around the tile, which indicate composite layers, and you should see this The text becomes clear after the transition is completed, just like your first example.  
 Unfortunately I have no solution for the underlying problem, i.e. blurry rendering of composite layers, I think this is something that can not be solved at the end, but only the rendering engine and / Or the graphics card can be fixed in the driver, depending on where the problem is right.