Border Disappears on Zoom Out/in In all Browser

Question

I am working on a project with different browsers.

I am having a table with borders and when I zoom out my page border disappears.

This happens in all browsers like IE, EDGE, and Chrome Browser.

Is it the DOM structure problem?

It needs to supports with zoom level 75% to 125%. To be specific set zoom to 67% in Chrome and see the change

Please provide the possible solution to this question.

.mEditor {
  display: flex;
  border-bottom: 1px solid #d7d7d7;
}

.m-label {
  width: 30%;
  display: flex;
  background-color: #f2f2f2;
}

.m-editor-noc {
  flex: 1;
  display: flex;
  background-color: #FFFFFF;
  border-left: 1px solid #d7d7d7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mfEditor {
  display: flex;
  flex: 1 0 auto;
}

.mEditor-li {
  vertical-align: middle;
  border-left: 1px solid #d7d7d7;
  height: 18px;
  display: inline-block;
  margin-top: 3px;
}

.mEditor .tEditor {
  border: none;
  flex: 1;
  padding-right: 6px;
}

<div class="m-group">


  <div id="id251" class="mEditor">

    <div class="m-label">
      <label for="id223" title="Address">Address</label>
    </div>
    <div class="m-editor-noc">
      <div id="id252" class="mfEditor">


        <input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id254" class="mEditor">

    <div class="m-label">
      <label for="id224" title="Address 2">Address 2</label>
    </div>
    <div class="m-editor-noc">
      <div id="id255" class="mfEditor">


        <input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id257" class="mEditor">

    <div class="m-label">
      <label for="id225" title="Postcode">Postcode</label>
    </div>
    <div class="m-editor-noc">
      <div id="id258" class="mfEditor">


        <input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id25a" class="mEditor ">

    <div class="m-label">
      <label for="id20f" title="City">City</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25b" class="mfEditor">


        <input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

      </div>

    </div>
  </div>



  <div id="id25d" class="mEditor">

    <div class="m-label">
      <label for="id228" title="District">District</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25e" class="mfEditor">


        <input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id260" class="mEditor ">

    <div class="m-label">
      <label for="id210" title="Country">Country</label>
    </div>
    <div class="m-editor-noc">
      <div id="id261" class="mfEditor">


        <input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

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


</div>

What is the result you are expecting. Please provide your question with that — AnouarZ, Nov 17 '17 at 11:56
Have you tried to read the error message you got when attempting to include the JSFiddle link. — Mr Lister, Nov 17 '17 at 12:19

tao · Answer 1 · 2017-11-17T17:09:02.780

If by "We supporting all browser and Zoom level 75% - 125%" you mean you want a border to have the same size in actual pixels regardless of zoom level, you're out of luck. It's not technically possible.

You should only develop for zoom level of 100%. There is no reliable cross-browser method to know the zoom level, which means this information is not available inside your Window object, so you can't use it to adjust values of properties on your elements.

As a fallback, you could just make the border thicker, so it will be visible even when zoomed. Now it's not displayed because it probably gets a sub-pixel size and estimated by the browser into non-renderable.
Do note everything you that's rendered at zoom levels other than 100% is entirely at the whim of how each browser internally chooses to estimate and render, which you:

have no control on
could change without notice.

In other words, your initial statement should have a minor footnote:

* Within reasonable limits. Rendering while zoomed is browser dependent.

score 1 · Answer 2 · answered Oct 18 '18 at 12:18

I encountered a similar issue with border disappearing. This answer was extremely helpful to me. Draw borders by pseudo-elements. The solution for your case could be like:

.mEditor {
  display: flex;
  /*border-bottom: 1px solid #d7d7d7;           <- REMOVE  */ 
  
  position: relative;       /*   <- ADD   */
}

.mEditor::after{       /*   <- ADD   */
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  border-bottom: 1px solid #d7d7d7;
}

.m-label {
  width: 30%;
  display: flex;
  background-color: #f2f2f2;
}

.m-editor-noc {
  flex: 1;
  display: flex;
  background-color: #FFFFFF;
  /*border-left: 1px solid #d7d7d7;           <- REMOVE  */   
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  position: relative;       /*   <- ADD   */
}
.m-editor-noc::after{       /*   <- ADD   */
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  border-left: 1px solid #d7d7d7;
}

.mfEditor {
  display: flex;
  flex: 1 0 auto;
}

.mEditor-li {
  vertical-align: middle;
  border-left: 1px solid #d7d7d7;
  height: 18px;
  display: inline-block;
  margin-top: 3px;
}

.mEditor .tEditor {
  border: none;
  flex: 1;
  padding-right: 6px;
}

<div class="m-group">


  <div id="id251" class="mEditor">

    <div class="m-label">
      <label for="id223" title="Address">Address</label>
    </div>
    <div class="m-editor-noc">
      <div id="id252" class="mfEditor">


        <input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id254" class="mEditor">

    <div class="m-label">
      <label for="id224" title="Address 2">Address 2</label>
    </div>
    <div class="m-editor-noc">
      <div id="id255" class="mfEditor">


        <input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id257" class="mEditor">

    <div class="m-label">
      <label for="id225" title="Postcode">Postcode</label>
    </div>
    <div class="m-editor-noc">
      <div id="id258" class="mfEditor">


        <input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id25a" class="mEditor ">

    <div class="m-label">
      <label for="id20f" title="City">City</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25b" class="mfEditor">


        <input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

      </div>

    </div>
  </div>



  <div id="id25d" class="mEditor">

    <div class="m-label">
      <label for="id228" title="District">District</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25e" class="mfEditor">


        <input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id260" class="mEditor ">

    <div class="m-label">
      <label for="id210" title="Country">Country</label>
    </div>
    <div class="m-editor-noc">
      <div id="id261" class="mfEditor">


        <input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

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


</div>

Unfortunately your solution creates a new problem: the after-element is lying above the div so if you have links in your div you can't click them anymore. — Vortilion, Jun 17 '20 at 12:37

Border Disappears on Zoom Out/in In all Browser

2 Answers2