News for hackers. Stuff that matters.
Re:The Shapes of CSS by isnotchicago on Sunday May 27, 2012 @08:26AM (#4029977)
Has anyone else noticed that at certain zoom levels, the triangle in the talk bubble looks disconnected by one pixel from the box? I have seen this problem with any similar use of the triangle hack.
Re:The Shapes of CSS by alecperkins on Sunday May 27, 2012 @12:58PM (#4030452)
Yes, I've seen that often. It's most apparent even without any zooming on mobile Safari. For this reason, whenever I use the triangle effect, I'll offset the element/pseudo-element by one pixel to avoid the gap.
Re:The Shapes of CSS by isnotchicago on Monday May 28, 2012 @12:01PM (#4033899)
Any ideas on a fix that works when the triangle must perfectly align with a box? In other words, when the base of the triangle should be the same width as the side of the box it touches. In this case, moving the triangle one pixel closer to the box means it does not fit perfectly against the box.

Example: http://jsfiddle.net/PLMSA/

Re:The Shapes of CSS by alecperkins on Monday May 28, 2012 @01:23PM (#4034187)
Since it's basically a rounding error, I'm not sure if there's any way to avoid the gap without some overlap. In that example, a :before pseudo-element that's the same width as the box and one pixel above the triangle can provide the overlap without needing to offset the triangle itself.

http://jsfiddle.net/enTz9/