CODEWITHSUNDEEP
javascriptjqueryhtmlcssbrowser
John R
John R

Reputation: 2791

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

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.

Upvotes: 0

Views: 1122

Answers (1)

piscu
piscu

Reputation: 94

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

Upvotes: 1

Related Questions