Geek Answers Handbook

Css transform border flickering

I have a pretty simple webpage that I use as a playground for the Angular -Material package. It includes the following section:

Section how it should look

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 (FAB, various Material Design buttons) that use CSS transforms to achieve effects like buttons, pop-ups, transparent bubbles, etc.

enter image description here

<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">&#xE8DC;</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 buttons when they are hidden, which it removes when they are pushed. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2)CSS style provides animation.

It's strange when I use any of these elements, from the moment the CSS transformation animation starts to the moment it ends, it border-radiusflickers on my div. It looks like this:

Section how it should not look

1 , CSS- , , . CSS Javascript - , .

, , border-radius, , . , , overflow: hidden . , , . - .

? , (, CSS background), , .

!important border-radius . , position: absolute; img, . , position: absolute;, border-radius transform, .

+4
3

, - , .

img :

position: absolute;
left: -40%;

:

margin-left: -40%;

( position: absolute.)

.

0

Just add:

-webkit-backface-visibility: hidden;

in css.

0
source

More articles:


All Articles