I have a pretty simple web page I'm using as a playground for the Angular-Material package. It includes the following section:
HTML:
<div class="margin-right community-photo">
<img class="circle" src="images/cookiemonster-small.png">
</div>
<div flex layout="column" class="pad-vert">
<span class="bold">C. Monster</span>
<span>C is for Cookie, and Cookie is for me.</span>
<span class="v-small-text">1 day ago</span>
</div>
SCSS:
div.community-photo {
position: relative;
width: 60px;
height: 60px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 50%;
img {
position: absolute;
width: 120px;
left: -40%;
border-radius: 50%;
}
}
On other parts of the page I have some elements (a FAB, various Material Design buttons) that use CSS transforms to achieve effects like buttons sliding out, transparent bubbles and so forth.
<md-fab-speed-dial md-open="social.isOpen" md-direction="left" class="md-fling fixed-low-right" hide-sm show-md show-lg show-gt-lg>
<md-fab-trigger>
<md-button aria-label="Social Links" class="md-fab md-warn">
<md-tooltip md-direction="top">Like Us!</md-tooltip>
<md-icon class="material-icons"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">Facebook</md-tooltip>
<md-icon class="fa fa-lg fa-facebook"></md-icon>
</md-button>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">Twitter</md-tooltip>
<md-icon class="fa fa-lg fa-twitter"></md-icon>
</md-button>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">Pinterest</md-tooltip>
<md-icon class="fa fa-lg fa-pinterest"></md-icon>
</md-button>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">Instagram</md-tooltip>
<md-icon class="fa fa-lg fa-instagram"></md-icon>
</md-button>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">YouTube</md-tooltip>
<md-icon class="fa fa-lg fa-youtube"></md-icon>
</md-button>
<md-button class="md-fab md-raised md-mini" href="">
<md-tooltip md-direction="top">LinkedIn</md-tooltip>
<md-icon class="fa fa-lg fa-linkedin"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
This element uses Javascript to apply a style tag with opacity: 1; z-index: 6; transform: translateX(56px); to the buttons when hidden, which it removes when they slide out. A transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) CSS style provides the animation.
Strangely, when I use any of these elements, from the time the CSS transform animation begins until the time it ends, the border-radius on my div flickers off. It looks like this:
It only looks like that for 1 second, until the CSS transform finishes, but it's a flicker and it's making me sad. The actual CSS attribute doesn't get changed by Javascript or anything, it just flickers.
Just to be clear, it is definitely the border-radius attribute that is malfunctioning and nothing else. The picture itself is much bigger, so I know that the overflow: hidden is staying intact. It's not jumping to the right, so I know the absolute positioning is fine. But for some reason, the border-radius is flickering off momentarily.
Why might this be happening? I know that there are other ways to add a rounded picture to my site (CSS background, for example) but this way seems like the most intuitive and I'd like to keep it.
I have tried adding !important to the border-radius style and it doesn't change anything. However, if I remove the position: absolute; style from the img tag, it doesn't flicker. Therefore, it must be some interaction of position: absolute;, border-radius and transform which is causing the problem.
