问题
This question, there is a point that is different from the "css scale chrome" other questions. iframe is moved to a specific location, text will be displayed correctly. And, when moved to a position where there is a problem again, the text will be blur.
Move will be executed position of jquery.
Why iframe is moved, text will be displayed correctly?
screen shots. http://ggamagidev.blogspot.com/2013/12/blurry-text-with-css-scaled-iframe-in.html
It is applied to the iframe, but they failed.
// transform: "translateZ(0)",
// "-webkit-transform": "translateZ(0)",
// "-webkit-text-stroke": "0.35px",
// "transform-style": "preserve-3d",
// "-webkit-transform-style": "preserve-3d",
// "transform-style": "flat",
// "-webkit-transform-style": "flat",
// "font-smooth":"never",
// "-webkit-perspective":1000,
// "backface-visibility": "hidden",
// "-webkit-backface-visibility":"hidden",
回答1:
Try if font blurred in chrome.
body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}
回答2:
Setting z-index to auto for all parent containers of iframe resolves issue with blurring despite from the first look it was related to transform scaling. The main point is exclude intersection of elements with the same z-index (they are caused annoying blurring effect in case iframe and scaling transform)
{z-index: auto;}
来源：https://stackoverflow.com/questions/20706279/blurry-text-with-css-scaled-iframe-in-chrome