Skip to content

Commit

Permalink
Make resize triggers use default CSS writing mode
Browse files Browse the repository at this point in the history
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] sdecima#61
  • Loading branch information
fred-wang committed Feb 15, 2020
1 parent 1b79a1a commit ad48721
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion detect-element-resize.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion jquery.resize.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down

0 comments on commit ad48721

Please sign in to comment.