Databases
StackOverflow2013
Postsdbo
POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
    primarykey
    data
    text
    <p>I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: <a href="http://jsfiddle.net/8csA9/20/" rel="noreferrer">http://jsfiddle.net/8csA9/20/</a> (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)</p> <p>Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?</p> <p>PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd</p> <p>PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USaphax
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHow intriguing! I would expect that font rendering would be handled by the OS natively and than transformed (like any other element would) - this is clearly not the case. I guess your main concern is the jumpiness of the transition rather than preference to a particular state - I wonder if you could trick the rendering engine into thinking the transition is ongoing?
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. USo.v.
    2. COYeah exactly, I'm basically fine with the OS doing whatever it wants (or the user wants) with the text, it's just that I'd like to have the animation less jumpy/jittery. Initially I assumed just applying any sort of transform that makes grid-fitting less useful (like a very small rotation) would make hinting remain disabled, but sadly that doesn't seem to be that case. Your idea of tricking the browser into a continuing transition is interesting though
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. USaphax
    3. CO@aphax You are very much correct when you say all of that. It does happen. I have been trying to find a solution to that for quite sometime now, but the only thing I have been able to come up with is to have small transitions of these sort. I mean instead of moving something by `5px`, move it only by `1px`. It would seem less jerky that time. And I will say it again, there seems to by no way to fix this.
      singulars
      1. POPrevent 'jumpy' CSS transitions on elements with hinted (grid-fitted) text
      1. USAniket
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload