From ad487218f6fa80b6fa02f6d2c58e59d7c1b63d27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Sat, 15 Feb 2020 14:35:30 +0100 Subject: [PATCH] Make resize triggers use default CSS writing mode 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 --- detect-element-resize.js | 2 +- jquery.resize.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/detect-element-resize.js b/detect-element-resize.js index cbb3c02..9aacafb 100644 --- a/detect-element-resize.js +++ b/detect-element-resize.js @@ -92,7 +92,7 @@ if (!stylesCreated) { //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360 var css = (animationKeyframes ? animationKeyframes : '') + - '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; direction: ltr; writing-mode: horizontal-tb; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); diff --git a/jquery.resize.js b/jquery.resize.js index ba42a80..f8669a5 100644 --- a/jquery.resize.js +++ b/jquery.resize.js @@ -110,7 +110,7 @@ //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360 var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + - '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; direction: ltr; writing-mode: horizontal-tb; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style');