Wrote a test dropdown. Clicking on "All Categories" normally opens the list. But if Google Chrome is scaled down to 67% , then you may notice a list bouncing while opening.

What is the reason and how can I fix it? Maybe I'm not counting on something in the script.

categories = { openDropdownList: function(obj, id) { var padding = $('#'+id).find('.title').css('padding-top').match(/\d+/); $('#'+id).toggle().css({ left: $(obj).position().left - padding, top: $(obj).position().top - padding, }); $('#'+id).find('.title').html($(obj).text()); } } 
 *, body {margin: 0; padding: 0;} body {overflow-x: hidden; background: #ededed; color: #333333; font-size: 18px; font-family: tahoma, verdana, arial, sans-serif, Lucida Sans; font-weight: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; zoom: 1;} a {text-decoration: none; border: 0px; outline: none; cursor: pointer; color: #1e7ec8;} a:hover {text-decoration: underline;} a.dotted {text-decoration: none; border-bottom: 1px dotted #4d76a3; padding-bottom: 2px;} a.dotted:hover {text-decoration: none; border-bottom: 1px solid #4d76a3;} .none {display: none} #categories_dropdown_list {position: absolute; width: 200px; background: #ffffff;} #categories_dropdown_list .list a {display: block; padding: 8px;} 
 <body> <div style="padding: 50px"></div> Категория: <a href="javascript://" onclick="categories.openDropdownList(this, 'categories_dropdown_list'); return false">Все категории</a> <div id="categories_dropdown_list" class="none br2px"> <div class="list"> <a href="#" class="title" onclick="categories.openDropdownList(this, 'categories_dropdown_list'); return false"></a> <a href="#">Категория 1</a> <a href="#">Категория 2</a> </div> </div> </body>

https://jsfiddle.net/5es1bm9c/5/

  • It seems to me that this is due to the pixel model happening. Dimensions are not intact. I wouldn’t bother with this one - Sergey
  • @ Sergey, I wouldn’t bother either, but on the site I’m doing, such trouble is at 90%. I want to get rid of this: ( - ModaL
  • using em indentation can solve the problem locally. In this case, jumps disappear on one scale, appear on another. It seems to me that this cannot be solved - Sergey

1 answer 1

It seems to work if the padding in the block is zeroed, and to use the line-height for all list items except the first

 #categories_dropdown_list .list a:not(:first-child) {display: block; padding: 0; line-height: 30px;}
  • Well, this principle is the same as removing padding from links, then everything will be fine. But this is no good. It seems to me that I miscalculated something in the code, that's why it works so crookedly. - ModaL
  • But in this case, the padding between the elements of the list is preserved, as required. Or am I misunderstanding something? - Sergey
  • but you need padding for links from all sides, as in the example. And here it is not at all, only inline. - ModaL
  • @ModaL never scale on the wheel, it almost always does not correctly display elements. Use web development tools like "Device mode" in chrome - Vasily Barbashev
  • @ Vasily Barbashev, but the user can change the scale and there is this curvature. - ModaL