search

wiseman / mavelous

multi-platform ground station for drones that speak the MAVLink protocol
MIT License
167 stars 85 forks source link

Retina on OS X and iOS #11

Open skelly opened 12 years ago

skelly commented 12 years ago

Canvas rendering on Retina iOS screens is wonky. The PFD looks pixel-doubled while regular HTML text looks ok.

wiseman commented 11 years ago

Sorry, I don't have a Retina display iOS device, so fixing this might take a while.

pchickey commented 11 years ago

Not a huge deal- this is definitely in the enhancement category, not a bug. Ill take a look as I get some time over the holidays.

On Dec 14, 2012, at 5:44 PM, John Wiseman notifications@github.com wrote:

Sorry, I don't have a Retina display iOS device, so fixing this might take a while.

— Reply to this email directly or view it on GitHubhttps://github.com/wiseman/mavelous/issues/11#issuecomment-11398471.

wiseman commented 11 years ago

This looks like it might be helpful: http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

Also I tried to reproduce using the XCode iPhone simulator in Retina mode, but I'm not sure if it worked. Can someone post a screenshot showing the problem?

dccourt commented 11 years ago

Looks OK to me on iPhone 5 right now - see attached. photo

pchickey commented 11 years ago

To my eyes the bug is still there - compare the fuzzy "20" on the left and right PFD tapes to the sharp "20 m" at the guide altitude slider. The PFD tape text is part of a canvas which is expanded to double size in pixels, whereas the "20 m" is just normal HTML text.

This isn't a high priority bug, by any means - just a "nice to have" feature.

On Sat, Feb 23, 2013 at 3:27 PM, David Court notifications@github.comwrote:

Looks OK to me on iPhone 5 right now - see attached. [image: photo]https://f.cloud.github.com/assets/1383539/188811/a07c1aa6-7e10-11e2-86f4-e2ef063ef145.PNG

— Reply to this email directly or view it on GitHubhttps://github.com/wiseman/mavelous/issues/11#issuecomment-14000259.

HowlingEverett commented 11 years ago

The reason this happens is because of the way Webkit renders the canvas on retina devices. On a retina device, the canvas is actually four times the pixels, but the backing store (the offscreen context in which you draw your content) is still in old-style physical pixels. Webkit scales up that content in the backing store before drawing - which is where the blurriness comes from.

Just a heads up with some context: what you want to investigate is webkit's window.devicePixelRatio property. Basically, Webkit can report whether it's got a standard 1:1 pixel ratio or a 2:1 pixel ratio (retina). If you get a devicePixelRatio of 2, you know you're on a retina device and can respond accordingly.

Unfortunately, how to deal with it is mostly a hack right now. When you get a devicePixelRatio of 2, but a webkitBackingStorePixelRatio property of 1, you essentially have to double the dimensions of the canvas (i.e. a 640_480 canvas becomes 1280_960), and then scale the element back down after rendering with CSS. Not elegant, but it works.

The most annoying thing is that Safari 6 was the one browser that handled this properly: it double the backing store automatically on retina devices. Chrome/Firefox/Mobile Safari didn't. And as of Safari 7, neither does Safari :/

heavybx23 commented 3 months ago

Cool⚡️