[bug] border-radius on UIImageView with UIImage set via code not working

[esttorhe]

Setting a class like this:

.profile-thumnbnail {
  border-radius: 6px;
}

And then assigning that to the styleClass of a UIImageView doesn't renders the corners as expected.

If i set something like this:

.profile-thumnbnail {
  border-radius: 6px;
  border: 1px solid #dddddd;
}

I can see the border being drawn correctly; rounded corners and everything but after I set the image via code the rendering disappears.

[pcolton]

You can't set borders and background in CSS and in code at the same time, but you can set the CSS in code, so that's the right way of assigning an image in code, by setting the styleCSS property. You could also have a new class that just adds the image and then add that class to the list of classes for that view. The latest version of Freestyle (2.1.4) added a addStyleClass method to UIViews.

[esttorhe]

@pcolton i never said I was assigning borders and background in CSS and code at the same time.

I said I'm using the styleClass to set the border-radius or either a UIImageView and then via code setting the UIImage property of that UIImageView or embedding the UIImageView inside a container UIView which conforms to the provided styleClass (with maskToBounds set to YES) and then assigning the UIImage via code.

Thanks for the addStyleClass suggestion though; I'll give it a try.

[pcolton]

In Freestyle, border-radius might be ignored if there's nothing to set the border on (i.e. a border or a background image). I will try to confirm.

[esttorhe]

I tried this:

self.avatarImageView.styleCSS = [NSString stringWithFormat:@"background-image:url(%@); border-radius:6px;", status.user.profileImageUrl];

And while it does work the performance is horrible (more so because its on a UICollectionViewCell) and the scrolling starts to jump when loading the image (I'm assuming its happening on the main thread) and deferring it to a background thread doesn't fix the issue sadly.

[pcolton]

Is your status.user.profileImageUrl image cached? For this particular use case, where your image is dynamic, you might be better off just using code to assign those since inlining the CSS isn't buying you much.

[esttorhe]

Like I said before; I'm setting the image by code but if I do it like that the image losses the border radius set with the CSS. 

I tried this approach based on what you suggested (not the same but just playing around to get the correct behavior). 

What I want is a UIImageView with border-radius of 6px; set via CSS and loading the image dynamically via code but I can't make t happen. Not even embedding the UIImageView inside a UIView that implements the CSS because for some reason wen setting the image by code the CSS gets "reset" or something. Don't know the cause of the issue.

On Tue, Jun 24, 2014 at 12:10 PM, Paul Colton notifications@github.com wrote:

Is your status.user.profileImageUrl image cached? For this particular use case, where your image is dynamic, you might be better off just using code to assign those since inlining the CSS isn't buying you much.

Reply to this email directly or view it on GitHub: https://github.com/Pixate/pixate-freestyle-ios/issues/128#issuecomment-47008314

[pcolton]

If you can post a sample app that reproduces the issue, I can try to resolve. Thanks.

On Tue, Jun 24, 2014 at 11:14 AM, Esteban Torres notifications@github.com wrote:

Like I said before; I'm setting the image by code but if I do it like that the image losses the border radius set with the CSS.

I tried this approach based on what you suggested (not the same but just playing around to get the correct behavior).

What I want is a UIImageView with border-radius of 6px; set via CSS and loading the image dynamically via code but I can't make t happen. Not even embedding the UIImageView inside a UIView that implements the CSS because for some reason wen setting the image by code the CSS gets "reset" or something. Don't know the cause of the issue.

On Tue, Jun 24, 2014 at 12:10 PM, Paul Colton notifications@github.com wrote:

Is your status.user.profileImageUrl image cached? For this particular use case, where your image is dynamic, you might be better off just using

code to assign those since inlining the CSS isn't buying you much.

Reply to this email directly or view it on GitHub:

https://github.com/Pixate/pixate-freestyle-ios/issues/128#issuecomment-47008314

— Reply to this email directly or view it on GitHub https://github.com/Pixate/pixate-freestyle-ios/issues/128#issuecomment-47008694 .

[pcolton]

By the way, in code, you can set the border radius like this:

yourView.layer.cornerRadius = 6;

[esttorhe]

@pcolton … thanks for being so supportive but at the same time I kind of get the feeling you are not actually reading everything I'm saying.

I'll put a sample code and upload to a public repo in case you want to give it a try.

As a side note I do know how to set everything from a purely Objective-C perspective; but the idea here is to use Pixate instead for an easier cohesive design between my website app and my mobile app.

Right now I have the code set to make the corner radius via code but initially I was expecting it to work with CSS.

As a matter of fact my UICollectionViewCell is supporting a styleClass that sets its border-radius to 4px without problems but inside the cell and image is not working.

I'll try to abstract the code into a small project for you to test.

[esttorhe]

@pcolton here's a repository that demonstrates the issue.

Uses CocoaPods but I included the Pods directory for simplicity's sake. Open the workspace (in case you haven't worked with CocoaPods before).

I added a delay of 1 second prior to start loading the images so you can see how the border-radius is there and then disappears once the image property of the UIImageView is set.

Edit: I also configured the border to have color so you can see how it "appears" and then "disappears"

[pcolton]

It disappears because as we discussed, you cannot set a border in CSS but the image in code, the code will overwrite the image we generated to create the border. Only solution is to set ALL the CSS in code or just do all the work in code, but you can't mix the two (half the work in CSS and the other half in code).

[esttorhe]

@pcolton sorry I missed that; from what you wrote before I couldn't quite catch that you couldn't set the image via code (you talked about the border and background which didn't translated to the image; at least for me).

Sadly setting all the CSS via code has a HORRIBLE impact in performance which pretty much makes it useless.

I guess I'll have to keep the rounded corners via code (which defeats the purpose of adopting Pixate/Freestyle at least in my case).

Thanks for taking the time to check the issue though.