Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Hmm, it's the same svg (https://news.ycombinator.com/triangle.svg) with the same votearrow CSS class on it; the down one just has an additional rotate180 class on it:

    .rotate180 {
      -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */
      -moz-transform:    rotate(180deg);  /* FF */
      -o-transform:      rotate(180deg);  /* Opera */
      -ms-transform:     rotate(180deg);  /* IE9 */
      transform:         rotate(180deg);  /* W3C complaint browsers */
    
      /* IE8 and below */
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')";
    }
on smaller screens (@media only screen and (min-width : 300px) and (max-width : 750px)) you additionally get:

    .votearrow { transform: scale(1.3,1.3); margin-right: 6px; }
    .votearrow.rotate180 {
          -webkit-transform: rotate(180deg) scale(1.3,1.3);  /* Chrome and other webkit browsers */
          -moz-transform:    rotate(180deg) scale(1.3,1.3);  /* FF */
          -o-transform:      rotate(180deg) scale(1.3,1.3);  /* Opera */
          -ms-transform:     rotate(180deg) scale(1.3,1.3);  /* IE9 */
          transform:         rotate(180deg) scale(1.3,1.3);  /* W3C complaint browsers */
    }
same scale, though


Rasterization can still lead to different sizes due to rounding, if the edge (or the rotation point) just happens to coincide with the raster edge between pixels (or something like that). You can't just rely on the shape being the same mathematically, you have to take quantization effects into account. Using dedicated shapes instead of the transform may also be more reliable.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: