layer.borderWidth と layer.cornerRadius を同時に使用するとボーダーの一部に白いギザギザが出る

概要

layer.borderWidth と layer.cornerRadius を同時に使用すると、
ボーダーの一部に白いギザギザが出るCALayerのバグ? のようなものにハマりました。

UI系のライブラリのIssuesにも同じようなことを言っている方がいました。 https://github.com/IBAnimatable/IBAnimatable/issues/503

具体的には

例えば、 角丸 23pt, ボーダー 3ptのデザインを実装しようとした時にこうなります。

f:id:yokurin:20190130000626p:plain

拡大するとこんな感じ。

f:id:yokurin:20190130001117p:plain    f:id:yokurin:20190130001120p:plain


layer.allowsEdgeAntialiasing というプロパティがありますが、trueにしても関係ありませんでした。

とても細かいですけど、背景が黒系だと白いギザギザが目立つんですよね。

解決方法

結構時間かけて、英語で調べたりしたんですけど、
CALayerのバグ?ということで具体的な解決方法が見つかりませんでしたが、
私は、Border用のView を用意することで解決しました。

f:id:yokurin:20190130002604p:plain