How to set `border-radius` #65

BartKoppelmans · 2016-02-02T19:48:52Z

Hello,

At the moment I've got my code such that an image is shown, however since the sizing is set, the border radius does not apply to the image. Is there any solution to this?

bicknellr · 2016-02-02T21:08:58Z

border-radius + cover seems to be working: http://jsbin.com/zizafe/1/edit?html,output
Can you include code to repro? (I'll reopen then.) Also, make sure you haven't added overflow: visible; to the iron-image somewhere.

BartKoppelmans · 2016-02-02T21:54:32Z

I can't find a way to reproduce it. I could share a link to my site and show that, but that won't suffice. I guess I've got something wrong, but I can't find it. There is no overflow: visible to the iron-image and there is nothing else that could be the problem. The only thing I found to solve it, was to remove the sizing.

I guess I have to get back to the /deep/ and force the border-radius on the sizedImgDiv.

bicknellr · 2016-02-08T18:32:25Z

What browser are you seeing this in? @balloob is seeing the same thing (~~#65~~ #67).

BartKoppelmans · 2016-02-08T20:40:26Z

I'm using Chrome version 50.0.2644.0 canary (64-bit)

balloob · 2016-02-09T02:45:50Z

I experienced the issue on Chrome 49.0.2623.39 beta (64-bit) using iron-image v1.2.2.

FWIW, I experienced the issue in this webcomponent after upgrading my dependencies.

Applied CSS is border-radius: 50% and the fit class which translates to

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

The demo of Home Assistant shows the older version of iron-image being used with the border-radius working (the badges on the top that contain images + the Chromecast entry)

GrahenKraken · 2016-02-10T16:42:27Z

I have the same issue inside of Cordova 6 + Crosswalk 16. Literally just did 'bower update' and the radius is broken.

ozasadnyy · 2016-02-27T12:17:43Z

Any updates here?

bicknellr · 2016-03-08T19:03:43Z

Hey, @bwh-rl, since you were able to repro and send a PR, do you have any extra info you could provide on your environment? I'm still having trouble with this. :/

bwh-rl · 2016-03-09T08:48:34Z

This is strange - I am not able to reproduce this myself. In our app the issue occurs. But in an test case i am not able to reproduce it. Going to do more tests.

What i know now is that it's somehow connected to the position: absolute; from the #sizedImgDiv.
And that this issue was not always present - Must have been either an browser or an polymer update.

Maybe some minor webkit bug that only occurs under special circumstances?

edit: Issue does not occur in Firefox.

bwh-rl · 2016-03-09T10:22:26Z

Figured out that the issue occurs if an iron-list is present, it looks like the transform property triggers it - But only if it is in the paper-drawer-panel.

<paper-drawer-panel>
    <div drawer>
        <iron-image style="width:100px; height:100px; border-radius:50%;" sizing="cover" src="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7Y1huOXVQdlFPMmM/materialdesign_introduction.png"></iron-image>
    </div>
    <div main>
        <div style="transform:translate3d(0px, 10px, 0px)">Transform element</div>
    </div>
</paper-drawer-panel>

bicknellr · 2016-03-09T19:12:53Z

@bwh-rl, thanks for whittling this down! Your snippet repro's for me.

bicknellr · 2016-03-09T19:52:55Z

Weird, this definitely feels like a Blink bug: in that demo, if you move the transform property from inline to a rule in the stylesheet, iron-image's default overflow: hidden; works as expected. Also, the JSBin link above does not repro in any other browser I've tried.

NicolasRannou · 2016-03-18T08:39:03Z

Any news on that?

bicknellr · 2016-03-18T18:42:19Z

Yeah, this is a Blink issue. Here's a Polymer-less repro (visible in Chrome 49.0.2623.87 and 51.0.2682.0 canary). I'm going to try and reduce it more and then file a bug.

bicknellr · 2016-03-18T19:37:09Z

Here we go:

<html>
  <head>
    <style>
      .overflow-hidden {
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }

      .background-red {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: red;
      }
    </style>
  </head>
  <body>
    <div style="transform: translate3d(50px, 0px, 0px);">
      This text has a CSS transform in an inline style.
    </div>
    <div class="overflow-hidden">
      <div class="background-red"></div>
    </div>
  </body>
</html>

Toggle the inline transform in the inspector to see the bug.

bicknellr · 2016-03-18T20:44:35Z

Oh, this is a known bug: https://crbug.com/449107

pimenteljchristopher · 2016-08-31T12:25:15Z

any news to this issue? I'm struggling to modify id=sizedImgDiv

pimenteljchristopher · 2016-08-31T14:57:53Z

I found out the solution.
Add this to css div
transition: transform 350ms ease-in-out;
will-change: transform;

bicknellr · 2016-09-12T18:09:19Z

@pimenteljchristopher and anyone else who comes here wondering about this, I can't see a consistent away to around this that isn't super hacky, so if this is a major problem for you please star the Chromium bug I've linked to. I think they use the star count as a rough metric for how many people are running into an issue in the wild.

bicknellr closed this as completed Feb 2, 2016

bicknellr reopened this Feb 8, 2016

bicknellr mentioned this issue Feb 8, 2016

Applying border-radius with CSS no longer works #67

Closed

bicknellr added the p1 - backlog label Feb 9, 2016

bwh-rl mentioned this issue Mar 8, 2016

Added border-radius: inherit; to the #sizedImgDiv #69

Open

bicknellr self-assigned this Mar 18, 2016

bicknellr mentioned this issue Apr 18, 2016

Use translateX instead of translate3d PolymerElements/paper-tabs#154

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set `border-radius` #65

How to set `border-radius` #65

BartKoppelmans commented Feb 2, 2016

bicknellr commented Feb 2, 2016

BartKoppelmans commented Feb 2, 2016

bicknellr commented Feb 8, 2016

BartKoppelmans commented Feb 8, 2016

balloob commented Feb 9, 2016

GrahenKraken commented Feb 10, 2016

ozasadnyy commented Feb 27, 2016

bicknellr commented Mar 8, 2016

bwh-rl commented Mar 9, 2016

bwh-rl commented Mar 9, 2016

bicknellr commented Mar 9, 2016

bicknellr commented Mar 9, 2016

NicolasRannou commented Mar 18, 2016

bicknellr commented Mar 18, 2016

bicknellr commented Mar 18, 2016

bicknellr commented Mar 18, 2016

pimenteljchristopher commented Aug 31, 2016

pimenteljchristopher commented Aug 31, 2016

bicknellr commented Sep 12, 2016

How to set border-radius #65

How to set border-radius #65

Comments

BartKoppelmans commented Feb 2, 2016

bicknellr commented Feb 2, 2016

BartKoppelmans commented Feb 2, 2016

bicknellr commented Feb 8, 2016

BartKoppelmans commented Feb 8, 2016

balloob commented Feb 9, 2016

GrahenKraken commented Feb 10, 2016

ozasadnyy commented Feb 27, 2016

bicknellr commented Mar 8, 2016

bwh-rl commented Mar 9, 2016

bwh-rl commented Mar 9, 2016

bicknellr commented Mar 9, 2016

bicknellr commented Mar 9, 2016

NicolasRannou commented Mar 18, 2016

bicknellr commented Mar 18, 2016

bicknellr commented Mar 18, 2016

bicknellr commented Mar 18, 2016

pimenteljchristopher commented Aug 31, 2016

pimenteljchristopher commented Aug 31, 2016

bicknellr commented Sep 12, 2016

How to set `border-radius` #65

How to set `border-radius` #65