Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Some DIVs aren't visible in Modal View using Bootstrap

Tags:

twitter-bootstrap

view

modal-dialog

I have a problem with the display of "n" div (with a gradient background) in a modal view. The problem is that not all "n" div are visible properly.

JSFiddle - here

Update - the problem seems to occur only on Chrome

enter image description here

Test - Code

css

.mypoint{
    cursor: pointer;
    height: 200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 5px;
}

.mypoint2{
    padding: 0;
    margin: 0;
}

.gradient1{
    background: -webkit-gradient(linear, center top, center bottom, from(#ff5e3a), to(#ff2a68));
    background: -webkit-linear-gradient(#ff5e3a, #ff2a68);
    background: -moz-linear-gradient(#ff5e3a, #ff2a68);
    background: -o-linear-gradient(#ff5e3a, #ff2a68);
    background: -ms-linear-gradient(#ff5e3a, #ff2a68);
    background: linear-gradient(#ff5e3a, #ff2a68);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e3a', endColorstr='#ff2a68',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient2{
    background: -webkit-gradient(linear, center top, center bottom, from(#ff9500), to(#ff5e3a));
    background: -webkit-linear-gradient(#ff9500, #ff5e3a);
    background: -moz-linear-gradient(#ff9500, #ff5e3a);
    background: -o-linear-gradient(#ff9500, #ff5e3a);
    background: -ms-linear-gradient(#ff9500, #ff5e3a);
    background: linear-gradient(#ff9500, #ff5e3a);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9500', endColorstr='#ff5e3a',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient3{
    background: -webkit-gradient(linear, center top, center bottom, from(#ffdb4c), to(#ffcd02));
    background: -webkit-linear-gradient(#ffdb4c, #ffcd02);
    background: -moz-linear-gradient(#ffdb4c, #ffcd02);
    background: -o-linear-gradient(#ffdb4c, #ffcd02);
    background: -ms-linear-gradient(#ffdb4c, #ffcd02);
    background: linear-gradient(#ffdb4c, #ffcd02);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c', endColorstr='#ffcd02',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient4{
    background: -webkit-gradient(linear, center top, center bottom, from(#87fc70), to(#0bd318));
    background: -webkit-linear-gradient(#87fc70, #0bd318);
    background: -moz-linear-gradient(#87fc70, #0bd318);
    background: -o-linear-gradient(#87fc70, #0bd318);
    background: -ms-linear-gradient(#87fc70, #0bd318);
    background: linear-gradient(#87fc70, #0bd318);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87fc70', endColorstr='#0bd318',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient5{
    background: -webkit-gradient(linear, center top, center bottom, from(#52edc7), to(#5ac8fb));
    background: -webkit-linear-gradient(#52edc7, #5ac8fb);
    background: -moz-linear-gradient(#52edc7, #5ac8fb);
    background: -o-linear-gradient(#52edc7, #5ac8fb);
    background: -ms-linear-gradient(#52edc7, #5ac8fb);
    background: linear-gradient(#52edc7, #5ac8fb);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52edc7', endColorstr='#5ac8fb',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient6{
    background: -webkit-gradient(linear, center top, center bottom, from(#1ad6fd), to(#1d62f0));
    background: -webkit-linear-gradient(#1ad6fd, #1d62f0);
    background: -moz-linear-gradient(#1ad6fd, #1d62f0);
    background: -o-linear-gradient(#1ad6fd, #1d62f0);
    background: -ms-linear-gradient(#1ad6fd, #1d62f0);
    background: linear-gradient(#1ad6fd, #1d62f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad6fd', endColorstr='#1d62f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient7{
    background: -webkit-gradient(linear, center top, center bottom, from(#c644fc), to(#5856d6));
    background: -webkit-linear-gradient(#c644fc, #5856d6);
    background: -moz-linear-gradient(#c644fc, #5856d6);
    background: -o-linear-gradient(#c644fc, #5856d6);
    background: -ms-linear-gradient(#c644fc, #5856d6);
    background: linear-gradient(#c644fc, #5856d6);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c644fc', endColorstr='#5856d6',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient8{
    background: -webkit-gradient(linear, center top, center bottom, from(#ef4db6), to(#c643fc));
    background: -webkit-linear-gradient(#ef4db6, #c643fc);
    background: -moz-linear-gradient(#ef4db6, #c643fc);
    background: -o-linear-gradient(#ef4db6, #c643fc);
    background: -ms-linear-gradient(#ef4db6, #c643fc);
    background: linear-gradient(#ef4db6, #c643fc);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4db6', endColorstr='#c643fc',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient9{
    background: -webkit-gradient(linear, center top, center bottom, from(#4a4a4a), to(#2b2b2b));
    background: -webkit-linear-gradient(#4a4a4a, #2b2b2b);
    background: -moz-linear-gradient(#4a4a4a, #2b2b2b);
    background: -o-linear-gradient(#4a4a4a, #2b2b2b);
    background: -ms-linear-gradient(#4a4a4a, #2b2b2b);
    background: linear-gradient(#4a4a4a, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#2b2b2b',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient10{
    background: -webkit-gradient(linear, center top, center bottom, from(#dbddde), to(#898c90));
    background: -webkit-linear-gradient(#dbddde, #898c90);
    background: -moz-linear-gradient(#dbddde, #898c90);
    background: -o-linear-gradient(#dbddde, #898c90);
    background: -ms-linear-gradient(#dbddde, #898c90);
    background: linear-gradient(#dbddde, #898c90);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbddde', endColorstr='#898c90',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient11{
    background-color: #ff3b30;

}
.gradient12{
    background-color: #ff9500;

}
.gradient13{
    background-color: #ffcc00;

}
.gradient14{
    background-color: #4cd964;

}
.gradient15{
    background-color: #34aadc;

}
.gradient16{
    background-color: #007aff;

}
.gradient17{
    background-color: #5856d6;

}
.gradient18{
    background-color: #ff2d55;

}
.gradient19{
    background-color: #8e8e93;

}
.gradient20{
    background-color: #c7c7cc;

}
.gradient21{
    background: -webkit-gradient(linear, center top, center bottom, from(#5ad427), to(#a4e786));
    background: -webkit-linear-gradient(#5ad427, #a4e786);
    background: -moz-linear-gradient(#5ad427, #a4e786);
    background: -o-linear-gradient(#5ad427, #a4e786);
    background: -ms-linear-gradient(#5ad427, #a4e786);
    background: linear-gradient(#5ad427, #a4e786);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ad427', endColorstr='#a4e786',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;


}
.gradient22{
    background: -webkit-gradient(linear, center top, center bottom, from(#c86edf), to(#e4b7f0));
    background: -webkit-linear-gradient(#c86edf, #e4b7f0);
    background: -moz-linear-gradient(#c86edf, #e4b7f0);
    background: -o-linear-gradient(#c86edf, #e4b7f0);
    background: -ms-linear-gradient(#c86edf, #e4b7f0);
    background: linear-gradient(#c86edf, #e4b7f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c86edf', endColorstr='#e4b7f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient23{
    background-color: #D1EEFC;

}
.gradient24{
    background-color: #E0F8D8;

}
.gradient25{
    background: -webkit-gradient(linear, center top, center bottom, from(#fb2b69), to(#ff5b37));
    background: -webkit-linear-gradient(#fb2b69, #ff5b37);
    background: -moz-linear-gradient(#fb2b69, #ff5b37);
    background: -o-linear-gradient(#fb2b69, #ff5b37);
    background: -ms-linear-gradient(#fb2b69, #ff5b37);
    background: linear-gradient(#fb2b69, #ff5b37);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb2b69', endColorstr='#ff5b37',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient26{
    background: -webkit-gradient(linear, center top, center bottom, from(#f7f7f7), to(#d7d7d7));
    background: -webkit-linear-gradient(#f7f7f7, #d7d7d7);
    background: -moz-linear-gradient(#f7f7f7, #d7d7d7);
    background: -o-linear-gradient(#f7f7f7, #d7d7d7);
    background: -ms-linear-gradient(#f7f7f7, #d7d7d7);
    background: linear-gradient(#f7f7f7, #d7d7d7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d7d7d7',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient27{
    background: -webkit-gradient(linear, center top, center bottom, from(#1d77ef), to(#81f3fd));
    background: -webkit-linear-gradient(#1d77ef, #81f3fd);
    background: -moz-linear-gradient(#1d77ef, #81f3fd);
    background: -o-linear-gradient(#1d77ef, #81f3fd);
    background: -ms-linear-gradient(#1d77ef, #81f3fd);
    background: linear-gradient(#1d77ef, #81f3fd);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d77ef', endColorstr='#81f3fd',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient28{
    background: -webkit-gradient(linear, center top, center bottom, from(#d6cec3), to(#e4ddca));
    background: -webkit-linear-gradient(#d6cec3, #e4ddca);
    background: -moz-linear-gradient(#d6cec3, #e4ddca);
    background: -o-linear-gradient(#d6cec3, #e4ddca);
    background: -ms-linear-gradient(#d6cec3, #e4ddca);
    background: linear-gradient(#d6cec3, #e4ddca);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cec3', endColorstr='#e4ddca',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient29{
    background: -webkit-gradient(linear, center top, center bottom, from(#55efcb), to(#5bcaff));
    background: -webkit-linear-gradient(#55efcb, #5bcaff);
    background: -moz-linear-gradient(#55efcb, #5bcaff);
    background: -o-linear-gradient(#55efcb, #5bcaff);
    background: -ms-linear-gradient(#55efcb, #5bcaff);
    background: linear-gradient(#55efcb, #5bcaff);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55efcb', endColorstr='#5bcaff',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient30{
    background-color: #FF4981;

}
.gradient31{
    background-color: #FFD3E0;

}
.gradient32{
    background-color: #F7F7F7;

}
.gradient33{
    background-color: #FF1300;

}
.gradient34{
    background-color: #1F1F21;

}
.gradient35{
    background-color: #BDBEC2;

}
.gradient36{
    background-color: #FF3A2D;

}

html

<!-- theme modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="background-color: transparent;background-image:url('images/blur_08.png');background-repeat: repeat;"> <!-- 0.8 -->

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel" style="color: black;">Seleziona Tema</h4>
        </div>

        <div class="modal-body">

            <div class="row">

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient1 mypoint" onclick="SET_THEME(1,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient2 mypoint" onclick="SET_THEME(2,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient3 mypoint" onclick="SET_THEME(3,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient4 mypoint" onclick="SET_THEME(4,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient5 mypoint" onclick="SET_THEME(5,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient6 mypoint" onclick="SET_THEME(6,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient7 mypoint" onclick="SET_THEME(7,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient8 mypoint" onclick="SET_THEME(8,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient9 mypoint" onclick="SET_THEME(9,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient10 mypoint" onclick="SET_THEME(10,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient11 mypoint" onclick="SET_THEME(11,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient12 mypoint" onclick="SET_THEME(12,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient13 mypoint" onclick="SET_THEME(13,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient14 mypoint" onclick="SET_THEME(14,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient15 mypoint" onclick="SET_THEME(15,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient16 mypoint" onclick="SET_THEME(16,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient17 mypoint" onclick="SET_THEME(17,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient18 mypoint" onclick="SET_THEME(18,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient19 mypoint" onclick="SET_THEME(19,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient20 mypoint" onclick="SET_THEME(20,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient21 mypoint" onclick="SET_THEME(21,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient22 mypoint" onclick="SET_THEME(22,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient25 mypoint" onclick="SET_THEME(25,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient27 mypoint" onclick="SET_THEME(27,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient28 mypoint" onclick="SET_THEME(28,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient29 mypoint" onclick="SET_THEME(29,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient30 mypoint" onclick="SET_THEME(30,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient31 mypoint" onclick="SET_THEME(31,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient33 mypoint" onclick="SET_THEME(33,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient34 mypoint" onclick="SET_THEME(34,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient35 mypoint" onclick="SET_THEME(35,<?php echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient36 mypoint" onclick="SET_THEME(36,<?php echo $_SESSION['ID'];?>);"></div></div>

            </div>

        </div>

        <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
        </div>


    </div>
  </div>
</div>



<li><a style="color: red;" class="" href="#" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-picture" style="margin-right: 5px;"></span>TEMA</a></li>
like image 442
WhiteLine Avatar asked May 19 '14 07:05

WhiteLine

2 Answers

This is one of the known bugs in Chrome. You can fix it in many different ways which are described here: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform. I recommend adding this line to your .gradientXX classes as it works for me:

-webkit-transform: translate3d(0,0,0);

If it doesn't work, try other workarounds from above link.

In Chrome 36 this bug is resolved, but I still see it in Opera 21 (which uses Chromium engnie). Additionaly, there are some other unrelated errors in Opera, so check it out in the javascript console.

like image 106
Grzegorz Adam Kowalski Avatar answered Oct 17 '22 06:10

Grzegorz Adam Kowalski

I have had this issue too, try removing the following from your CSS

background-attachment: fixed;

like image 41
Hue Avatar answered Oct 17 '22 05:10

Hue
Sign in to Comment

Related questions

How can I set bootstrap's @baseFontSize if using a CDN?
twitter bootstrap modal not displaying remote image
Collapse div/element on mobile screens only with bootstrap. Example pic
Using multiple bootstrap Typeahead fields in a single page?
CSS word wrap with floating elements
Is it possible to use Twitter Bootstrap to create a Magento site?
Django: Why should I use a package for Twitter bootstrap integration?
How to position submit button on same line as input with Simple Form and Bootstrap?
Customizing Bootstrap's validation tooltip?
Dynamic links in Twitter Bootstrap navbar in angularjs
Integrating Mmenu within Bootstrap
Right way of triggering a javascript from html
My CSS are overridden by Bootstrap CSS
Repeated Pseudo-Class Selectors
Twitter Bootstrap Legacy: Uniform height on spans
Twitter Bootstrap responsive images with different sizes resizing unproportionaly
popover-append-to-body attribute for a popover element doesn't seem to work in angular-ui
Create bootstrap form having horizontal and vertical form field
jQuery Datepicker in Twitter Bootstrap 3 Modal
How do I dynamically change ng-grid table size when parent containing div size changes?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!