What do you do when blocks don't converge at relative sizes?

Question

css

If the sizes are relative and transform is used, then we can get a mismatch in the sizes of the elements.
jsfiddle.net/opbfzkun - this example uses hover transform, parent block size is set to vw/vh, child size is set to %.
Sometimes I can get something like this:

Or something like this:

What if it's because of vw/vh? No. jsfiddle.net/x7ztp5vd - sizes of the parent block in px, but:

And if you set more pleasant sizes of the parent block - jsfiddle.net/r3nu9hbb ? Yes, it worked out fine for me:
Screenshots were taken in Chromium at a resolution of 1920x1080 pixels. This has been noticed one way or another in all popular browsers of recent versions (Chrome / Chromium, Firefox, Safari, Opera). In IE10, I couldn’t repeat it under the virtual machine in the examples above, but it’s not a fact that everything is fine there. This is quite difficult to repeat, so you need to play around with the examples, this does not appear for all sizes.
The examples have a .t class that can be added to .item: perhaps transitions will exacerbate this "feature".
Perhaps this problem also manifests itself not only with transforms, but with any other properties. About 7 years ago this was relevant, but now browsers round pixels very intelligently, and making a jamb in a simple example is not so easy. It seems to me that I met them on sites where there were a lot of SVG, animations (not transforms), but I can’t immediately give a simple and demonstrative example, cleared of everything superfluous.
Especially such pixel problems are felt on sites that are super-responsive or use techniques that force you to set absolutely all sizes in rem/em/%. I already wrote about the aggressive use of this approach once (if you decide to read, be sure to look at the comments), where I mentioned, just in case, possible problems with rounding sizes.
And I have some questions:

1. Is the bug repeated with relative sizes and transforms, doesn't it seem right to me? Am I making an obvious mistake?
   
2. Have you seen similar problems? Maybe it was in complex interfaces and not with transforms? Real examples of web applications/sites are of particular interest.
   
3. How can you solve this without converting the dimensions to px and rounding them up?
   

It would be interesting to know how browsers deal with size rounding in general, perhaps someone looked into the source code or knows cool articles?

Answer 1

I myself want to deal with the problem of the lack of normal polyfills for relative values, taking into account resizing and redefining the pixel grid.
Here is enough to cut the toaster jsfiddle.net/x7ztp5vd
#toster {
width: 293px;
height: 301px; -> 300px;
}
Since we take 25%, then when scaling, we get 1/4 pixel, which is rounded down and gives a "space".
The problem is in the selection of sizes for the elements, so that when rounded it would fit well into the browser's pixel grid and not give such artifacts. This is a sin for all existing relative values ​​in the webkit :(
ps if you want to start developing a polyfill - write to Skype.