0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Chrome, Edge バージョン128 getBoundingClientRectの返却値変更

Last updated at Posted at 2024-09-09

事象

document.body.zoom=1.2など、プログラム的にブラウザの表示率を調整しています。
(様々なモニタ解像度から最適な表示をするための工夫)

最新版のChromeに更新されたら
JqueryUIのdatepicker、autocomplete
bootstrap-datetimepicker
のポップアップ(吹き出し)は呼出元のフォームコントロール(日付入力欄など)の直下から、かなりずれてた位置に表示されてしまっています。

JqueryUIの表示例
image.png

原因

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フレームワーク側の対処が期待されますが動向不明

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?