Button redimensionne le contour du conteneur div de parent dans Firefox 50.0

Question

J'essaie de créer un design responsive avec la possibilité d'avoir un bouton qui semble "flotter" sous un élément div.

Dans Opera et Chrome je ce que je veux:

C'est ce qui se passe dans Firefox:

Vous pouvez voir mon code complet ici: https://jsfiddle.net/fej93gg5/

Comment puis-je répare ça?

Modifier: J'ai trouvé un rapport de bug pour Firefox here. Il semble que ce bug existe depuis très longtemps, donc je ne peux pas m'attendre à ce qu'il soit corrigé rapidement. Maintenant, je suis à la recherche d'une solution de contournement.

<div class="blockcontainer-2col with-outline vertical-center "> 
    <div class="blockcontainer-content"> 

    <h2 class="titlecontent-2col">Some title</h2> 

    <div class="textcontent"> 
     <ul class="bulletlist"> 
      <li>Blah blah</li> 
      <li>Blub blub</li> 
      <li>Whoopdi doopdi hokus pokus kdkjeljer</li>i> 
     </ul> 
     <!-- This button is not supposed to resize the outline --> 
     <div style="display: float; font-size: 1.7em; text-align: center; font-weight: bold;"> 
      <a class="flatblockbutton" href="http://bluedomainer.com/portfolio/">Check out portfolio</a> 
     </div> 
    </div> 
    </div> 
</div> 

Ceci est la pleine css:

/* reset all margins and borders to zero */ 
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video { 
margin:0; 
padding:0; 
border:0; 
font:inherit; 
vertical-align:baseline 
} 

/*trick to vertically align anything */ 
.vertical-center 
{ 
display: flex; 
align-items: center; 
justify-content: center; 
} 

/* make white transparent outline */ 
.with-outline { 
outline: thick solid; 
outline-color: rgba(255, 255, 255, .5); 
outline-width: 1rem; 
background-color: white; 
} 

body { 
-webkit-font-smoothing:antialiased; 
-webkit-text-size-adjust:100%; 
} 

.wholecontainer-2col { 
background-color: violet; 
padding: 1rem; 
} 

/*parent*/ 
.colcontainer-2col { 
display: flex; 
display: -webkit-flex; 
display: -ms-flexbox; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: center; 
align-items: stretch; 
align-content: center; 
text-align: center; 
} 

/* every flex child */ 
.blockcontainer-2col { 
margin: 2rem; 
padding:0; 
} 

/* make items resizable */ 
.resizable { 
display: table-cell; 
width: auto; 
max-height: 27rem; /*THIS*/ 
} 

/* Title format */ 
.titlecontent-2col { 
padding-top: 20px; 
text-align: center; 
padding: 1em; 
line-height:2rem; 
font-size:2rem; 
font-family: "Open Sans", sans-serif; 
font-weight:bold; 
color:#4d4c4c; 
} 

/* Text format */ 
.textcontent { 
text-align: justify; 
font-family:"Droid Sans",sans-serif; 
color:#696969; 
} 


/* Bullet list format */ 
.bulletlist { 
    counter-reset: foo; 
    display: table; 
    font-size: 1.7rem; 
    text-align: left; 
    margin:0 auto; 
    list-style-position:inside; 
    padding-left: 0.5rem; 
    padding-right: 0.5rem; 
} 

.bulletlist>li { 
    list-style: none; 
    counter-increment: foo; 
    display: table-row; 
    text-align: justify; 
} 

.bulletlist>li::before { 
    content: "•"; 
    display: table-cell; 
    text-align: right; 
    padding-right: .3em; 
} 

.flatblockbutton { 
    box-sizing: border-box; 
    text-decoration:none; 
    box-shadow: 0px 2px 7px 5px rgba(0,0,0,0.12); 
    padding: 1rem 4rem; 
    font-family: Proxima,Helvetica,sans-serif; 
    line-height: 1rem; 
    background-color: rgba(0, 129, 186, 1); 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 1rem; 
    font-weight: 600; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-radius: 3px; 
    -webkit-font-smoothing: antialiased; 
    -webkit-transition: 500ms linear 0s; 
    -moz-transition: 500ms linear 0s; 
    -o-transition: 500ms linear 0s; 
    transition: 500ms linear 0s; 
    position: relative; 
    top: 2rem; 
    left: 0rem; 
    overflow:hidden; 
} 

.flatblockbutton:hover, .flatblockbutton:focus { 
    background: rgba(16, 145, 202, 1); 
    text-shadow: -1px 1px 10px #ffc, 1px -1px 8px #ffffff; 
    box-shadow: 5px 7px 12px 10px rgba(0,0,0,0.14); 
    top: 1.5rem; 
    left: -0.5rem 
} 

Answer 1

Ceci est lié à une longue date Firefox Bug #687311

j'ai réalisé que je ne devais pas insister sur l'utilisation outline. Je me suis débarrassé de outline et utilisé border pour le remplacement. Si vous n'avez pas besoin d'utiliser outline, cette solution est une solution de contournement très pratique.

En d'autres mots au lieu de:

/* make white transparent outline - buggy in Firefox*/ 
.with-outline { 
outline: thick solid; 
outline-color: rgba(255, 255, 255, .5); 
outline-width: 1rem; 
background-color: white; 
} 

J'utilisé

/* make white transparent border - works in Firefox*/ 
.with-outline { 
border: 1rem solid rgba(255, 255 ,255,.5); 
background-color: rgba(255, 255, 255, 1); 

-moz-background-clip: padding;  /* Firefox 3.6 */ 
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */ 
background-clip: padding-box;  /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
} 

Vous pouvez également renommer votre classe with-outline-with-border. Le background-clip est nécessaire, sinon la couleur d'arrière-plan chevauchera la bordure.

https://jsfiddle.net/pjc0xmh8/