How to troubleshoot firefox flex display

Question

Created this portfolio it works perfectly in Chrome, but in firefox the tag button that is superimposed on the tag img (to make the shadow effect and open a modal) appears as a fifth item, generating horizontal scroll and not making the shading effect when the mouse passes over, I would like to know how to leave overlapped in firefox!

How it looks on Chrome:(How it should look) How it looks in firefox:

<style type="text/css">

    .portfolio{margin-bottom: 100px; margin-top: 86px;display: flex; flex-wrap: wrap;}

    .projetos{width: 25%;}

    .projetos-content{position: relative;}

    .projetos-img{width: 100%;}

    .sombra{background: rgba(255,255,255,0.0); width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s; border: none;}

    .sombra:hover{background: rgba(0, 0, 0, 0.4); cursor: pointer;}

</style>

<div class="portfolio">

  <div class="projetos">

    <div class="projetos-content">

      <img src="1.jpg" class="projetos-img">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

      <img src="2.jpg" class="projetos-img">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

      <img src="3.jpg" class="projetos-img">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

      <img src="1.jpg" class="projetos-img">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div> 

</div>

Answer 1

Friend basically what was missing in your code was to define a reference on the axis X, notice that you declared a top as 0, which would be pebble Y, but did not state anything for the axis X, you can use either a left: 0; how I used or right: 0; that also goes well. Then in class .sombra I added a tb left: 0;.

Here’s what it looks like. You can try it on Fire Fox and it’ll work. This particularity goes from browser to browser, there is not much to explain in this "error", this has more to do with the browser rendering engine, which in Firefox is different from Chrome....

.portfolio{margin-bottom: 100px; margin-top: 86px;display: flex; flex-wrap: wrap;}

.projetos{width: 25%;}

.projetos-content{position: relative;}

.projetos-img{width: 100%;}

.sombra{background: rgba(255,255,255,0.0); width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; border: none;}

.sombra:hover{background: rgba(0, 0, 0, 0.4); cursor: pointer;}

<div class="portfolio">

  <div class="projetos">

    <div class="projetos-content">

      <img  class="projetos-img" src="https://placecage.com/100/100">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

        <img  class="projetos-img" src="https://placecage.com/100/100">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

        <img  class="projetos-img" src="https://placecage.com/100/100">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div>

  <div class="projetos">

    <div class="projetos-content">

      <img  class="projetos-img" src="https://placecage.com/100/100">

      <button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>

    </div>

  </div> 

</div>