Bootstrap progress bar showing on back and front all the time on Chrome.

[Jarzebowsky]

https://jsfiddle.net/L6knkw1q/

It happends on Chrome, Firefox is okey.

Also it breaks my display on phones for both Chrome and Firefox.

[paoloalby]

same problem with Safari on iPhone and iPad

[Jarzebowsky]

I managed to fix it for Chrome and Firefox for my case, but got stuck on Safari. It hides my progress bars except first one. Might send you my fix @paoloalby for my case if I find a solution for this.

@Edit

I made for everything a CSS workarounds and it's working.

[paoloalby]

@Jarzebowsky where I can find your CSS fix?

[Jarzebowsky]

@paoloalby I made them for my HTML construction, gonna send you all and just adjust it to yours

    .actions > div {
        margin-right: 0;
    }

    .actions .front .price {
        -webkit-backface-visibility: hidden;
        background-color: #fff;
    }

    .actions .front div.progress {
        overflow: unset !important;
    }

    .actions .front div.progress-bar {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .actions .back div.progress-bar {
        backface-visibility: unset !important;
        -webkit-backface-visibility: unset !important;
    }

    .actions .back div.progress-parent {
        overflow: hidden;
        -webkit-backface-visibility: unset !important;
    }

    .actions .back div.progress {
        backface-visibility: unset !important;
        -webkit-backface-visibility: unset !important;
    }

    @media only screen and (min-width: 425px) {
        .actions.actions-price .back {
            width: calc(100% + 30px) !important;
        }   
    }

    @media (max-width: 426px) {
        .actions.actions-price .back {
            width: calc(100% - 20px) !important;
        }

        .actions .front {
            position: relative !important;
        }

        .actions .back {
            position: absolute !important;
            top: 0 !important;
        }
    }

Here is my HTML so you will see which elements get what classes

                    <div id="actions-<?php echo $product['product_id']; ?>" class="col-sm-4 actions actions-price <?php echo ($product['not_four_stuck']['state'] && $product['warehouses'] > 1) ? 'warehouses' : ''; ?>">
                        <div id="show-1" class="front">
                            <div class="price text-center">
                                <?php if (!$product['special']) { ?>
                                    <span class="price"><?php echo explode('zł', $product['price'])[0]; ?>
                                        <span class="addon">
                                            <span class="currency">zł</span>
                                            <span class="divider">/</span>
                                            <span class="stuck">szt.</span>
                                        </span>
                                        <?php echo ($product['not_four_stuck']['state'] && $product['warehouses'] > 1) ? '<span>*</span>' : ''; ?>
                                    </span>
                                <?php } else { ?>
                                    <span class="price-old"><?php echo $product['price']; ?></span> <span
                                            class="price-new"><?php echo $product['special']; ?></span>
                                    <?php } ?>
                                    <span class="pos_price"><?php echo $text_our_price; ?></span>
                            </div>

                            <div class="quantity">
                                <div class="col-xs-5">
                                    <span class="avaiability"><?php echo $text_avaiability; ?></span>
                                </div>
                                <div class="col-xs-7">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-<?php echo ($product['quantity'] < 8) ? ($product['quantity'] <= 4) ? 'danger' : 'warning' : 'success'; ?>"
                                             role="progressbar" aria-valuemin="0"
                                             aria-valuenow="<?php echo ($product['quantity'] > 10) ? '100' : $product['quantity'] . '0'; ?>"
                                             aria-valuemax="100"
                                             style="width: <?php echo ($product['quantity'] > 10) ? '100' : $product['quantity'] . '0'; ?>%">
                                            <span><?php echo $product['quantity'] . ' ' . $text_pieces; ?></span>
                                        </div>
                                        <?php echo $product['quantity'] . ' ' . $text_pieces; ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <?php if ($product['not_four_stuck']['state'] && $product['warehouses'] > 1) { ?>
                            <div id="show-2" class="back">
                                <div class="price text-center">
                                    <span class="pos_price"><?php echo $text_our_price; ?></span>
                                </div>
                                <div class="quantity">               
                                    <div class="col-xs-5">
                                        <span class="avaiability"><?php echo $product['price'] . '/' . $text_pieces; ?></span>
                                    </div>
                                    <div class="col-xs-7 progress-parent">
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-<?php echo ($product['not_four_stuck']['quantity'] < 8) ? ($product['not_four_stuck']['quantity'] <= 4) ? 'danger' : 'warning' : 'success'; ?>" role="progressbar" aria-valuemin="0" aria-valuenow="<?php echo ($product['not_four_stuck']['quantity'] > 10) ? '100' : $product['not_four_stuck']['quantity'] . '0'; ?>" aria-valuemax="100" style="width: <?php echo ($product['not_four_stuck']['quantity'] > 10) ? '100' : $product['not_four_stuck']['quantity'] . '0'; ?>%">
                                                <span><?php echo $product['not_four_stuck']['quantity'] . ' ' . $text_pieces; ?></span>
                                            </div>
                                            <?php echo $product['not_four_stuck']['quantity'] . ' ' . $text_pieces; ?>
                                        </div>
                                    </div>
                                </div>

                                <?php foreach ($product['next_stucks_from'] as $next_stucks_from) { ?>
                                    <div class="quantity">               
                                        <div class="col-xs-5">
                                            <span class="avaiability"><?php echo $next_stucks_from['price'] . 'zł' . '/' . $text_pieces; ?></span>
                                        </div>
                                        <div class="col-xs-7 progress-parent">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-<?php echo ($next_stucks_from['quantity'] < 8) ? ($next_stucks_from['quantity'] <= 4) ? 'danger' : 'warning' : 'success'; ?>" role="progressbar" aria-valuemin="0" aria-valuenow="<?php echo ($next_stucks_from['quantity'] > 10) ? '100' : $next_stucks_from['quantity'] . '0'; ?>" aria-valuemax="100" style="width: <?php echo ($next_stucks_from['quantity'] > 10) ? '100' : $next_stucks_from['quantity'] . '0'; ?>%">
                                                    <span><?php echo $next_stucks_from['quantity'] . ' ' . $text_pieces; ?></span>
                                                </div>
                                                <?php echo $next_stucks_from['quantity'] . ' ' . $text_pieces; ?>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    </div>