blurry

SVG rendered into canvas blurred on retina display

馋奶兔 提交于 2019-11-26 21:40:08
问题 I have an issue with SVG rendered into canvas. On retina displays canvas rendered as base64 url and set as SRC into is blurred. I've tried various methods that was described in list below with no luck: https://tristandunn.com/2014/01/24/rendering-svg-on-canvas/ How do I fix blurry text in my HTML5 canvas? Canvas drawing and Retina display: doable? https://www.html5rocks.com/en/tutorials/canvas/hidpi/ Now i don't know what should i do to make it better. Please look into my result: jsfiddle.net

WebKit: Blurry text with css scale + translate3d

一世执手 提交于 2019-11-26 16:01:45
I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/ . (View in Chrome.) .test { -webkit-transform: translate3d(0px, 100px, 0px); } .testInner { /*-webkit-transform: scale(1.2);*/ -webkit-transform: scale3d(1.2, 1.2, 1); text-align: center; } <div class="test"> <div class="testInner"> This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. </div> </div> Are there any known workarounds for this? I get that in the simple example above, I could

WebKit: Blurry text with css scale + translate3d

ぐ巨炮叔叔 提交于 2019-11-26 04:40:03
问题 I\'m seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here\'s a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.) .test { -webkit-transform: translate3d(0px, 100px, 0px); } .testInner { /*-webkit-transform: scale(1.2);*/ -webkit-transform: scale3d(1.2, 1.2, 1); text-align: center; } <div class=\"test\"> <div class=\"testInner\"> This is blurry in Chrome/WebKit when translate3d and scale or scale3d are