CSS issue on zooming browser - Element is disappearing from view on zooming

Question

I have div with height 1px and width 100px . Now I am zooming my web page from 100% to 80% or less (67% or 50% or 33%). The element is hidden from visible now at certain zoom level. But it is available in DOM structure.

Then when I go to develop menu and change the value of height from "1px" to "2px" or "3px", the element gets appeared in the view.

Please check the following code snippets:

 #test1{ width: 100px; height: 1px; background-color:blue; } 

 <div id="test1"></div> 

Do anyone have idea about this? And can I get fix for this with CSS? That is element to be visible in all the zoom levels.

Note: I am zooming the web page using ctrl and + or ctrl and mouse wheel.

Answer 1

you can change height value for any zoom level

  $(window).resize(function() {
    var zoomLevel = window.devicePixelRatio;
    if(zoomLevel < 0.67 && zoomLevel > 0.3){
     $("#test1").css({ 'height': '3px' });
    }else{
      $("#test1").css({ 'height': '1px' });
    }
  });

https://codepen.io/piscu/pen/EboKLX