Search code examples
macoscocoanstableviewnstextfieldnsimageview

NSTextField is blurry in NSTableView when image is inserted in a row

In my view-based NSTableView, each view has (among other stuff) an NSTextField, and an NSImageView right below the text field.

Sometimes, when I insert a new row at the top of the table, and this row has an image in its NSImageView, the text in the other rows becomes blurry/degraded.

The text becomes normal again after scrolling several times.

Not ok:

enter image description here

Ok:

enter image description here

An example where the text is only blurred in the rows after the one with the image:

enter image description here

This really makes me think it's a problem coming from .insertRows or noteHeightOfRows.

All elements have autolayout constraints set in IB.

The scroll view has a CoreAnimation layer set in IB. I also use the layer when preparing the cell:

cell.layer?.isOpaque = true
cell.textLabel.layer?.isOpaque = true

and sometimes

cell.layer?.borderColor = someColor
cell.layer?.borderWidth = someWidth

enter image description here

Rows are inserted with:

// update the model, then:
NSAnimationContext.runAnimationGroup({ (context) in
    context.allowsImplicitAnimation = true
    self.table.insertRows(at: index, withAnimation: [.effectGap])
})

Updating the row with the image:

// in tableViewCell, while populating the table
cell.postImage.image = img
cell.postImage.needsDisplay = true  

// once the image is downloaded
table.reloadData(forRowIndexes: ..., columnIndexes: ...)
table.noteHeightOfRows(withIndexesChanged: ...)

How to avoid this issue? It's hard to debug because it doesn't always happen and I can't see what are the reasons for it to happen when it does.

Solution

  • Due to the fact that the text got blurry only when an image was inserted, my first thought is that the NSTextField's frame is not "integral" (its pixel values are not integers). Which is a well known reason for getting blurry text.

    You are using an Auto Layout feature of Cocoa so my suggestion is to override the void layout() method inside your view-based table view cell.

    To call it's super method (to let Cocoa to do all the needed layout calculations) and just to set the frame of the textFiled to be the same frame, but integral.

    Addendum: while the textField itself may have an integral frame - it still can be layed out on a "half pixel" (in real screen coordinates) which will still lead to the blurriness.

    TextField is a subView of the cell so itss frame is not in the screen coordinates but in the cell coordinates.

    Example: let's imagine that the cell has a frame of (0.5, 0.5 , 100, 100) which is not integral, and the textField has an integral frame of (10,10, 50, 50) which is integral by all means!

    BUT when the textField will be layed out on the screen it will have the following frame: (10.5, 10.5, 50, 50) which is not integral - and will lead to drawing the textField on a "half pixel" (not integral) which leads to blurry text.

    So in your case the cell itself must be layed out on an integral frame as well as the textField to ensure that the textField is on integral frame in screen coordinates.

    In your tableViewCell subclass:

    void layout()
{
    [super layout];

     //**** We have to ensure that the cell is also layed on an integral frame ****//

    [self setFrame:NSIntegralRect(self.frame)];

    //At this point after calling the [super layout]; myTextField will have a valid (autolayoutwise) frame so all you have to do is to ensure that it is indeed an integral frame doing so by calling NSIntegralRect(NSRect rect); method of Cocoa framework.
    [myTetxField setFrame:NSIntegralRect(myTextField.frame)];

    //Maybe optionally you will want to set everything to the integral rect :-)
    /*
    for(NSView * view in self.subViews)
    {
         [view setFrame:NSIntegralRect(view.frame)];
    }
    */
}