事象
document.body.zoom=1.2など、プログラム的にブラウザの表示率を調整しています。
(様々なモニタ解像度から最適な表示をするための工夫)
最新版のChromeに更新されたら
JqueryUIのdatepicker、autocomplete
bootstrap-datetimepicker
のポップアップ(吹き出し)は呼出元のフォームコントロール(日付入力欄など)の直下から、かなりずれてた位置に表示されてしまっています。
原因
Chromeバージョン128でgetBoundingClientRectのAPI戻り値は、プログラムで調整したzoom率を反映した情報となっています。
以前はオリジナルな値となっています。
最新のW3C標準仕様
https://drafts.csswg.org/css-viewport/#zoom-om
The getBoundingClientRect, getClientRects, and IntersectionObserver APIs must return rects with scaled lengths.
JqueryUIなどのJSフレームワークのoffset関数は、getBoundingClientRectにてLEFTやTOPの座標を計算しており、内部的に矛盾が出ているようです。
参考デバッグ情報(LEFT属性)
旧バージョンChrome
$( "#datepicker" ).offset().left
93.98436737060547
$( "#ui-datepicker-div" )のHTML上のSTYLE.LEFT
93.9844px
$( "#ui-datepicker-div" ).offset().left
93.98436737060547
➡三つともほぼ一緒で表示ズレはない
新バージョンChrome
$( "#datepicker" ).offset().left
112.78125
$( "#ui-datepicker-div" )のHTML上のSTYLE.LEFT
112.781px
$( "#ui-datepicker-div" ).offset().left
135.33334350585938
➡112.781の約1.2倍(bodyのzoom率通り)となるためズレる
暫時対処例
offsetに乗算されているzoom率を除算してオリジナル座標に戻させる
var originalOffset = $.fn.offset;
$.fn.offset = function() {
var originalResult = originalOffset.apply(this, arguments);
originalResult.top = originalResult.top / document.body.style.zoom;
originalResult.left = originalResult.left / document.body.style.zoom;
return originalResult;
}
恒久対処
JqueryUIなど、JSフレームワーク側の対処が期待されますが動向不明