fred-wang
commented
4 years ago I verified that the resize observer still works in different writing modes in Firefox and Chrome. I also checked that the patch avoids triggering the use counter.
Patch tested with the following:
<!DOCTYPE html>
<html>
<head>
<title>Detect element resize demo</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="detect-element-resize.js"></script>
<style>
.resizable {
resize: both;
overflow: hidden;
background: blue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Detect element resize demo</h1>
<div style="writing-mode: horizontal-tb">
default: <div class="resizable"></div>
</div>
<div style="direction: rtl">
rtl: <div class="resizable"></div>
</div>
<div style="writing-mode: vertical-rl">
vertical-rl: <div class="resizable"></div>
</div>
<div style="writing-mode: vertical-lr">
vertical-lr: <div class="resizable"></div>
</div>
<script type="text/javascript">
Array.from(document.getElementsByClassName("resizable")).forEach((element) => {
addResizeListener(element, () => {
var rect = element.getBoundingClientRect();
var css = window.getComputedStyle(element);
console.log(`Writing mode: ${css.writingMode}, ${css.direction}`);
console.log(`Size: ${rect.width}x${rect.height}`);
});
});
</script>
</body>
</html>
The Chromium community is moving to scroll position values indicated in the CSSOM specification [1]. In order to launch the feature and analyze potential broken URLs, they count pages setting the scroll position of a scroller in non-default writing mode to a positive value. Websites using javascript-detect-element-resize in RTL or vertical mode appear in the top results and cause a lot of false positives [2]. In order to avoid that, ensure that the resize triggers use the default writing mode (direction: ltr and writing-mode: horizontal-tb).
[1] https://www.chromestatus.com/feature/5759578031521792 [2] https://github.com/sdecima/javascript-detect-element-resize/issues/61