Affix smear in Chrome

[kwladyka]

It is like affix looks in firefox (it is good)

And now in chrome

It happens when i change width of window to more narrow and start scrolling page. I tested this on firefox and chrome.

It doesn't look like bad CSS or something. It look's like bug in chrome? Like some bug in refresh view? But mayby it is possible to fix something in bootstrap affix, because of that it is no more usefull.

Affix

<div class="col-sm-4">
    <div id="offer-affix">
        <div class="price">
            {{offer.price.price()}} <span class="currency">zł</span><span class="fixed-cost pull-right">koszta stałe</span>
        </div>
        <div class="affix-border">
            <ul class="list-unstyled">
                <li>1 000 zł najem</li>
                <li>500 zł czynsz (ogrzewanie, woda, śmieci)</li>
            </ul>
            <ul class="list-unstyled">
                <li>+ prąd</li>
                <li>+ gaz</li>
            </ul>
            <p class="contact">Telefon</p>
            <p><i class="glyphicon glyphicon-phone"></i>&nbsp 691 166 313</p>
            <p class="contact">E-mail</p>
            <p><i class="glyphicon glyphicon-envelope"></i>&nbsp [email protected]</p>
            <!-- <p class="contact">Dane kontaktowe</p>
            <button ng-click="showContact();" type="button" class="btn btn-primary" style="width: 100%;"><i class="glyphicon glyphicon-phone"></i> <i class="glyphicon glyphicon-envelope"></i>&nbsp;&nbsp;&nbsp;Pokaż dane kontaktowe</button> -->
            <button type="button" class="btn btn-primary" style="width: 100%;">Wyślij wiadomość e-mail</button>
        </div>
    </div>
</div>

CSS (LESS)

@media (min-width: @screen-sm) {
    .offer #offer-affix.affix-top {
        margin-top: -42px;
        position: absolute;
    }
    .offer #offer-affix.affix .affix-border {
        border: 1px solid #dce0e0;
    }
}
@media (max-width: @screen-sm) {
    .offer #offer-affix.affix {
        position: static;
    }
}

.offer #offer-affix.affix {
    top: 50px;
    background-color: #ffffff;
}
.offer #offer-affix .affix-border {
    padding: 0px 20px 20px 20px;
}

.offer #offer-affix .price {
    padding: 0px 20px;
    line-height: 40px;
    font-size: 150%;
    background-color: #3c3f40;
    background-color: rgba(60,63,64,0.9);
    color: white;
}
.offer #offer-affix .price span.currency, .offer #offer-affix .price span.fixed-cost {
    font-size: 70%;
}

#offer-affix ul {
    margin-bottom: 0px;
}
#offer-affix ul li {
    padding: 6px 0px;
}

#offer-affix p.contact {
    margin-bottom: 5px;
    padding-top: 20px;
    font-weight: bold;
}

There is a full example
http://wladyka.eu/a/#/show-offer

[cvrebert]

Could you repost your example as a JS Bin or JS Fiddle?

[mdo]

Probably a problem with Chrome changing the text rendering as an element is transformed? If so, it's a documented and most unfortunate bug I'm afraid.

[kwladyka]

I found it happens because of line

<div class="item active" ng-style="{'background-image': 'url(\'{{ offer.imgs[0] }}\')'}"></div>

It is line in carousel. When i remove this line this bug disappear. Somebody have any idea why?

even when i cut this line to

<div class="item active"></div>

bug appear.

But when i remove class active or class item bug disappear.

[mdo]

Again, likely a problem with CSS transforms and transitions on the page causing the CSS to render awkwardly. That's a known browser bug and one we cannot solve ourselves unfortunately.

[kwladyka]

But how carousel is connected with affix? It is totally separa block of code. Any hints how this bug works? I have to find my custom fix on my specific code example.

[kwladyka]

I found even more precise information:

This bug appear because of:

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
display: block;
}

If i uncheck this CSS in chrome bug disappear.

Any hint why does it happen and how can i fix this?

[kwladyka]

I found a solution!

Add to element whith bug, CSS code -webkit-transform: translateZ(0);
In my case i added this to affix class.

[mdo]

@kwladyka That has unwanted side effects. There's some history in previous issues where we added that ourselves. We've since removed almost every instance of that line of code because of that.

[cvrebert]

Specifically, see the conversation on #13649 and the issues cross-referenced from it.