Transformation Blur Prevention: Scale

Question

I scale the div using the transform property, but want to keep its children (which have 1px width or height) the same size. I counted them at .5 , and the expected result is that the 1px element scaled by 2 and then .5 should return to 1px , but they end up blurry 2px .

Here is the field before scaling it:

 .container { width: 200px; height: 200px; margin: 100px; background-color: #EEE; position: absolute; } .outline { position: absolute; background: #1899ef; z-index: 999999; opacity: 1 !important; } .outlineBottom, .outlineTop { width: 100%; height: 1px; } .outlineLeft, .outlineRight { height: 100%; width: 1px; } .outlineRight { right: 0px; } .outlineBottom { bottom: 0px; } 

 <div class="container"> <div class="outline outlineTop"></div> <div class="outline outlineRight"></div> <div class="outline outlineBottom"></div> <div class="outline outlineLeft"></div> </div> 

As you can see, the elements on the edges are a clear, dark 1px blue. Here's what the window looks like after scaling:

 .container { width: 200px; height: 200px; margin: 100px; background-color: #EEE; position: absolute; transform: scale(2); } .outline { position: absolute; background: #1899ef; z-index: 999999; opacity: 1 !important; transform: scale(.5); } .outlineBottom, .outlineTop { width: 100%; height: 1px; transform: scale(1,.5); } .outlineLeft, .outlineRight { height: 100%; width: 1px; transform: scale(.5,1); } .outlineRight { right: 0px; } .outlineBottom { bottom: 0px; } 

 <div class="container"> <div class="outline outlineTop"></div> <div class="outline outlineRight"></div> <div class="outline outlineBottom"></div> <div class="outline outlineLeft"></div> </div> 

And here is the post-scaled rendering from Chrome 41.0.2272.89 Mac, this is what I'm launching.

Adding transform-3d(0, 0, 0) did not help. A solution was found using the zoom property , but since zoom not supported. I would like to avoid this. Adding filter: blur(0px); also showed no effect.

The chat .5px that perhaps the kids first scaled to .5 , and then doubled in size, causing them to shrink to .5px and then back from there. Is there a way to ensure the order in which they are displayed makes them first scale to 2px and then halve? Against my best judgment, I tried to force the rendering order using JS , but it is not surprising that this had no effect (although, interestingly, the bottom element retained its original color).

Otherwise, are there any other solutions floating around? I cannot be the only one who is facing this problem.

Answer 1

This is due to the default transform-origin for scaled elements. By default, it is equal to 50% 50% for any element to be converted, but this has problems when decreasing 1px values, since it must center the scale on the half-pixel, and there are problems for displaying elements here. You can see that it works here with transform-origin moved to the corresponding extremes for each element.

A little about games shows that the same blurring occurs on scalable elements for any dimension, where scaling ends at half a pixel.

 body { padding: 1em; } .container { width: 200px; height: 200px; margin: 100px; background-color: #EEE; position: absolute; transform: scale(2); } .outline { position: absolute; background: #1899ef; z-index: 999999; opacity: 1 !important; } .outlineBottom, .outlineTop { width: 100%; height: 1px; transform: scale(1, 0.5); } .outlineBottom { bottom: 0; transform-origin: 0 100%; } .outlineTop { transform-origin: 0 0; } .outlineLeft, .outlineRight { height: 100%; width: 1px; transform: scale(.5,1); } .outlineRight { right: 0px; transform-origin: 100% 0; } .outlineLeft { left: 0px; transform-origin: 0 0; } 

 <div class="container"> <div class="outline outlineTop"></div> <div class="outline outlineRight"></div> <div class="outline outlineBottom"></div> <div class="outline outlineLeft"></div> </div>