css - blur filter doesn't work on internet explorer and firefox -


when use pc, can't see blur filter works on firefox , i.e. me on mac works perfectly. here code or jsfiddle link if want try: [jsfille][1]

[1]: http://jsfiddle.net/kodjoe/3avv3v5l/3/ 

here html code :

<div class="remodalshare-bg"><a href="#follow">follow</a></div>  <div style="height:auto;" class="remodalshare" data-remodalshare-id="follow">  <div style="position: absolute; top:5px; right:10px; border:0px;z-index:9999999;" class="remodalshare-closeposition">  <a href="#" data-remodalshare-action="close" class="remodalshare-close" aria-label="close"> <img src="http://www.500milligrammes.com/facticemagazine/final/addon/modal/x.png" alt="close"/> </a>  </div> test </div> 

here css code:

*, *:after, *:before { padding: 0;margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} .clearfix:before, .clearfix:after {content: " "; display: table;} .clearfix:after { clear: both;} .clearfix { *zoom: 1; } html, body { height: 100%;} .identifiant {text-align:center;}  img, object, embed { max-width: 100%; border: 0px none; }   body {padding: 0px; margin: 0px auto; font-weight:400; font-family:"open_sansregular", "arial", sans-serif; background: url(http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border:0px solid #fff; line-height:1.5em}  .remodalshare-is-active .remodalshare-bg { background: url(http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg) no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  -webkit-filter: blur(8px); -ms-filter: blur(8px); -moz-filter: blur(8px); -o-filter: blur(8px); filter: blur(8px); filter:progid:dximagetransform.microsoft.blur(pixelradius='8'); }   /* ----- modal share button ----- */ .sharepositionabout { margin:20px 0px 20px 0px; width:100%; text-align:left; }  html.remodalshare-is-locked { overflow: hidden; }  .page, .remodalshare { -webkit-text-size-adjust:100% }   /* anti fouc */  .remodalshare,[data-remodalshare-id] { display:none }  /* necessary styles of overlay */  .remodalshare-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; background: #fff; background:rgba(255,255,255,1) }  /* necessary styles of wrapper */  .remodalshare-wrapper { position:fixed; z-index:10000; top:0; right:0; bottom:0; left:0; display:none; overflow:auto; text-align:center; -webkit-overflow-scrolling:touch; padding:0px }  .remodalshare-wrapper:after { display:inline-block; height:100%; margin-left:-.05em; content:"" }  /* fix ipad, iphone glitches */  .remodalshare-overlay,.remodalshare-wrapper { -webkit-backface-visibility:hidden;backface-visibility:hidden }   /* necessary styles of modal dialog */  .remodalshare { position:relative; display: inline-block; -moz-text-size-adjust:100%;-ms-text-size-adjust:100%; text-size-adjust:100%; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; padding:0px; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); color:#2b2e38; background:#fff }           /* background effects */  .remodalshare-bg { -webkit-transition: -webkit-filter 0.2s ease-out; -moz-transition: -moz-filter 0.2s ease-out; -o-transition: -o-filter 0.2s ease-out; transition: filter 0.2s ease-out; height:100%;}    /* default theme styles of overlay */  .remodalshare-overlay { -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; opacity: 0; background: rgba(255, 255, 255, 0); }  body.remodalshare-is-active .remodalshare-overlay { opacity: 1; }  /* default theme styles of modal dialog */  .remodalshare { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: 100%; padding: 40px 35px 20px 35px;  -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out; transition: transform 0.2s ease-out, opacity 0.2s ease-out; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); opacity: 0; color: #000; background: rgba(255, 255, 255, 1); background-clip: padding-box; }  body.remodalshare-is-active .remodalshare { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; }  /* vertical align of modal dialog */  .remodalshare, .remodalshare-wrapper:after { vertical-align: middle; }   /* media queries ========================================================================== */  @media screen , (min-width: 480px) { .remodalshare { max-width: 480px; min-height: 0; margin: 20px auto 0px auto; -webkit-border-radius: 6px; border-radius: 6px; } }  /* ie8 ========================================================================== */  .lt-ie9 .remodalshare-overlay { filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#f021242e, endcolorstr=#f021242e); }  .lt-ie9 .remodalshare { width: 480px; min-height: 0; margin: 20px auto 0px auto; } 


Comments

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

Delphi 7 and decode UTF-8 base64 -

html - Is there any way to exclude a single element from the style? (Bootstrap) -