Stack Overflow
Stack Overflow

Questions tagged [subpixel]

Use this tag for questions related to subpixel, where an animation would apply gradually.

Basically concerns animations where it would be applied gradually, giving it a smooth view rather than shifting the animated object in a pixel-to-pixel manner which looks odd for users.

78 questions
52
votes
6 answers

Subpixel anti-aliased text on HTML5's canvas element

I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the…
Matt Mazur
  • 980
  • 1
  • 10
  • 22
27
votes
3 answers

Animate CSS background-position with smooth results (sub-pixel animation)

I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here: http://jsfiddle.net/5pVr4/2/ @-webkit-keyframes MOVE-BG { from { …
Jayden Lawson
  • 2,154
  • 2
  • 21
  • 24
23
votes
2 answers

Sub-Pixels calculated and rendered differently among browsers

The purpose: I am working on a code similar to this to create a component where an input field has an embedded button: http://codepen.io/anon/pen/pgwbWG?editors=110 As you can see, the button is positioned absolutely with top and bottom set to 0, to…
Kamafeather
  • 8,663
  • 14
  • 69
  • 99
22
votes
3 answers

RGB subpixel rendering for graphics?

I wonder if there is any graphics library that supports RGB subpixel rendering (like ClearType) for general graphics, not just for text. This would allow one to practically triple the horizontal resolution, and put graphics on third-pixel x…
jdm
  • 9,470
  • 12
  • 58
  • 110
16
votes
16 answers

HTML: Sub-pixel border

Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually? Thank you.
Francisc
  • 77,430
  • 63
  • 180
  • 276
13
votes
2 answers

Prevent subpixel rendering with svg

I'm working with SVGs currently and came to a dead end. The SVG has lines, which should scale together with zooming (so that they stay in balance: 100% width 10px --> 10% width 1px for example) i scale all stroke-widths with this code: var svgPath…
breezertwo
  • 585
  • 7
  • 26
13
votes
6 answers

safari rounding down on subpixel calculations

i have a container that takes up 829px on a row, and has a background-image of the same size. i have a div within that container that calculates its width based on the 829px container. on safari, the divs width comes out to be something like…
Masu
  • 1,568
  • 4
  • 20
  • 41
11
votes
4 answers

disable subpixel aliasing on html/css borders

I'm using css transform:scale to scale some elements up, and now the borders, which were originally 1px solid black, get some subpixel rendering - 'antialiasing' - since they are now 1.4px or something. Exactly how it looks depends on the browser,…
commonpike
  • 10,499
  • 4
  • 65
  • 58
10
votes
4 answers

Drawing an image using sub-pixel level accuracy using Graphics2D

I am currently attempting to draw images on the screen at a regular rate like in a video game. Unfortunately, because of the rate at which the image is moving, some frames are identical because the image has not yet moved a full pixel. Is there a…
Kaushik Shankar
  • 5,491
  • 4
  • 30
  • 36
10
votes
10 answers

Can you have a 0.5px border on a Retina Display?

On Mobile Safari on an iPhone 4 or iPhone4S, can you have a border of a div that is 0.5px wide?
Drew LeSueur
  • 19,185
  • 29
  • 89
  • 106
10
votes
4 answers

Poor anti-aliasing of text drawn on Canvas

I'm drawing text on Canvas, and am disappointed with the quality of antialiasing. As far as I've been able to determine, browsers don't do subpixel antialising of text on Canvas. Is this accurate? This is particularly noticeable on iPhone and…
Joubert Nel
  • 3,154
  • 3
  • 26
  • 24
9
votes
2 answers

Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

I'm trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible: http://jsfiddle.net/bJKQ6/2/ .column { float: left; width: 25%; } The main container has a…
gyo
  • 1,663
  • 1
  • 19
  • 28
9
votes
1 answer

Java - Does subpixel line accuracy require an AffineTransform?

I've never worked with Java drawing methods before, so I decided to dive in and create an analog clock as a PoC. In addition to the hands, I draw a clock face that includes tick marks for minutes/hours. I use simple sin/cos calculations to…
D.N.
  • 2,160
  • 18
  • 26
9
votes
1 answer

Is there any way to draw lines with subpixel precision in Swing?

This question has been asked before, but the answers don't solve the problem, so I ask it again. It was suggested that instead of using g2.drawLine, you could use g2.draw(line), where line is a Line2D.Double. However, as you can see from the…
Luigi Plinge
  • 50,650
  • 20
  • 113
  • 180
8
votes
6 answers

How to have CATextLayer smooth its text?

According to the documentation, it is possible to enable font smoothing inside CATextLayer: Text can only be drawn using sub-pixel antialiasing when it is composited into an existing opaque background at the same time that it's rasterized. Here is…
alecail
  • 3,993
  • 4
  • 33
  • 52
1
2 3 4 5 6