recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve scrolling behavior for lightboxes in Safari

Summary: Our "html { overflow-y: scroll; }" makes Safari flip out when we put "hidden" on body. Instead, put the scroll on `body` and then replace it with `hidden` when the lightbox is visible.

Test Plan: In Safari, the body scrollbar vanishes when the lightbox is active and scrolling no longer causes spasms.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran

Differential Revision: https://secure.phabricator.com/D3800

epriestley 4596e387 70dc3f50

+39 -52
+28 -28
src/__celerity_resource_map__.php
··· 1385 1385 ), 1386 1386 'javelin-behavior-lightbox-attachments' => 1387 1387 array( 1388 - 'uri' => '/res/0cfebd8a/rsrc/js/application/core/behavior-lightbox-attachments.js', 1388 + 'uri' => '/res/6ddb05f8/rsrc/js/application/core/behavior-lightbox-attachments.js', 1389 1389 'type' => 'js', 1390 1390 'requires' => 1391 1391 array( ··· 2237 2237 ), 2238 2238 'lightbox-attachment-css' => 2239 2239 array( 2240 - 'uri' => '/res/136d479b/rsrc/css/aphront/lightbox-attachment.css', 2240 + 'uri' => '/res/b931ca15/rsrc/css/aphront/lightbox-attachment.css', 2241 2241 'type' => 'css', 2242 2242 'requires' => 2243 2243 array( ··· 2396 2396 ), 2397 2397 'phabricator-core-css' => 2398 2398 array( 2399 - 'uri' => '/res/6710c9ba/rsrc/css/core/core.css', 2399 + 'uri' => '/res/768cc6eb/rsrc/css/core/core.css', 2400 2400 'type' => 'css', 2401 2401 'requires' => 2402 2402 array( ··· 3070 3070 ), array( 3071 3071 'packages' => 3072 3072 array( 3073 - '4322f368' => 3073 + 'a4d32081' => 3074 3074 array( 3075 3075 'name' => 'core.pkg.css', 3076 3076 'symbols' => ··· 3099 3099 21 => 'phabricator-flag-css', 3100 3100 22 => 'aphront-error-view-css', 3101 3101 ), 3102 - 'uri' => '/res/pkg/4322f368/core.pkg.css', 3102 + 'uri' => '/res/pkg/a4d32081/core.pkg.css', 3103 3103 'type' => 'css', 3104 3104 ), 3105 3105 'f5ccc73b' => ··· 3266 3266 'reverse' => 3267 3267 array( 3268 3268 'aphront-attached-file-view-css' => '7839ae2d', 3269 - 'aphront-crumbs-view-css' => '4322f368', 3270 - 'aphront-dialog-view-css' => '4322f368', 3271 - 'aphront-error-view-css' => '4322f368', 3272 - 'aphront-form-view-css' => '4322f368', 3269 + 'aphront-crumbs-view-css' => 'a4d32081', 3270 + 'aphront-dialog-view-css' => 'a4d32081', 3271 + 'aphront-error-view-css' => 'a4d32081', 3272 + 'aphront-form-view-css' => 'a4d32081', 3273 3273 'aphront-headsup-action-list-view-css' => '2ba14b3d', 3274 - 'aphront-headsup-view-css' => '4322f368', 3275 - 'aphront-list-filter-view-css' => '4322f368', 3276 - 'aphront-pager-view-css' => '4322f368', 3277 - 'aphront-panel-view-css' => '4322f368', 3278 - 'aphront-side-nav-view-css' => '4322f368', 3279 - 'aphront-table-view-css' => '4322f368', 3280 - 'aphront-tokenizer-control-css' => '4322f368', 3281 - 'aphront-tooltip-css' => '4322f368', 3282 - 'aphront-typeahead-control-css' => '4322f368', 3274 + 'aphront-headsup-view-css' => 'a4d32081', 3275 + 'aphront-list-filter-view-css' => 'a4d32081', 3276 + 'aphront-pager-view-css' => 'a4d32081', 3277 + 'aphront-panel-view-css' => 'a4d32081', 3278 + 'aphront-side-nav-view-css' => 'a4d32081', 3279 + 'aphront-table-view-css' => 'a4d32081', 3280 + 'aphront-tokenizer-control-css' => 'a4d32081', 3281 + 'aphront-tooltip-css' => 'a4d32081', 3282 + 'aphront-typeahead-control-css' => 'a4d32081', 3283 3283 'differential-changeset-view-css' => '2ba14b3d', 3284 3284 'differential-core-view-css' => '2ba14b3d', 3285 3285 'differential-inline-comment-editor' => '8136e4a6', ··· 3345 3345 'javelin-workflow' => 'f5ccc73b', 3346 3346 'maniphest-task-summary-css' => '7839ae2d', 3347 3347 'maniphest-transaction-detail-css' => '7839ae2d', 3348 - 'phabricator-app-buttons-css' => '4322f368', 3348 + 'phabricator-app-buttons-css' => 'a4d32081', 3349 3349 'phabricator-content-source-view-css' => '2ba14b3d', 3350 - 'phabricator-core-buttons-css' => '4322f368', 3351 - 'phabricator-core-css' => '4322f368', 3352 - 'phabricator-directory-css' => '4322f368', 3350 + 'phabricator-core-buttons-css' => 'a4d32081', 3351 + 'phabricator-core-css' => 'a4d32081', 3352 + 'phabricator-directory-css' => 'a4d32081', 3353 3353 'phabricator-drag-and-drop-file-upload' => '8136e4a6', 3354 3354 'phabricator-dropdown-menu' => 'f5ccc73b', 3355 - 'phabricator-flag-css' => '4322f368', 3356 - 'phabricator-jump-nav' => '4322f368', 3355 + 'phabricator-flag-css' => 'a4d32081', 3356 + 'phabricator-jump-nav' => 'a4d32081', 3357 3357 'phabricator-keyboard-shortcut' => 'f5ccc73b', 3358 3358 'phabricator-keyboard-shortcut-manager' => 'f5ccc73b', 3359 3359 'phabricator-menu-item' => 'f5ccc73b', ··· 3361 3361 'phabricator-paste-file-upload' => 'f5ccc73b', 3362 3362 'phabricator-prefab' => 'f5ccc73b', 3363 3363 'phabricator-project-tag-css' => '7839ae2d', 3364 - 'phabricator-remarkup-css' => '4322f368', 3364 + 'phabricator-remarkup-css' => 'a4d32081', 3365 3365 'phabricator-shaped-request' => '8136e4a6', 3366 - 'phabricator-standard-page-view' => '4322f368', 3366 + 'phabricator-standard-page-view' => 'a4d32081', 3367 3367 'phabricator-tooltip' => 'f5ccc73b', 3368 - 'phabricator-transaction-view-css' => '4322f368', 3369 - 'syntax-highlighting-css' => '4322f368', 3368 + 'phabricator-transaction-view-css' => 'a4d32081', 3369 + 'syntax-highlighting-css' => 'a4d32081', 3370 3370 ), 3371 3371 ));
+8 -5
webroot/rsrc/css/aphront/lightbox-attachment.css
··· 2 2 * @provides lightbox-attachment-css 3 3 */ 4 4 5 + 5 6 .lightbox-attached { 6 - height: 100%; 7 - overflow-y: hidden; 7 + overflow: hidden; 8 + 8 9 } 9 10 10 11 .lightbox-attachment { 11 12 position: fixed; 12 - top: 44px; 13 + top: 0; 13 14 left: 0; 15 + bottom: 0; 16 + right: 0; 14 17 z-index: 12; 15 - width: 100%; 18 + overflow-y: auto; 16 19 } 17 20 18 21 .lightbox-attachment img { 19 - margin: 12px auto 0px auto; 22 + margin: 50px auto 0; 20 23 } 21 24 22 25 .lightbox-attachment .loading {
+1 -1
webroot/rsrc/css/core/core.css
··· 3 3 */ 4 4 5 5 6 - html { 6 + body { 7 7 /* Always show the vertical scrollbar so that going from a page without a 8 8 scrollbar to a page with a scrollbar doesn't make content jump a few 9 9 pixels left when the viewport narrows. */
+2 -18
webroot/rsrc/js/application/core/behavior-lightbox-attachments.js
··· 15 15 var next = null; 16 16 var x_margin = 40; 17 17 var y_margin = 100; 18 - var onscroll = window.onscroll; 19 18 var downloadForm = JX.$H(config.downloadForm); 20 19 21 20 function loadLightBox(e) { ··· 88 87 ); 89 88 JX.DOM.appendContent(lightbox, name_element); 90 89 91 - var s = JX.Vector.getScroll(); 92 - var closeIcon = ''; 93 - // Don't show the close icon if the beautiful header is 94 - // still mostly present. Optimizes for common case of 95 - // clicking on an attachment in object detail view without 96 - // scrolling. 97 - if (s.y >= 22) { 98 - closeIcon = JX.$N('a', 90 + var closeIcon = JX.$N('a', 99 91 { 100 92 className : 'lightbox-close', 101 93 href : '#' 102 94 } 103 95 ); 104 - JX.DOM.listen(closeIcon, 'click', null, closeLightBox); 105 - } 96 + JX.DOM.listen(closeIcon, 'click', null, closeLightBox); 106 97 JX.DOM.appendContent(lightbox, closeIcon); 107 98 var leftIcon = ''; 108 99 if (next) { ··· 225 216 lightbox = null; 226 217 prev = null; 227 218 next = null; 228 - window.onscroll = onscroll; 229 219 } 230 220 231 221 function loadAnotherLightBox(el, e) { ··· 243 233 } 244 234 var img = JX.DOM.find(lightbox, 'img'); 245 235 var d = JX.Vector.getDim(img); 246 - var s = JX.Vector.getScroll(); 247 236 JX.Stratcom.addData(img, { x : d.x, y : d.y } ); 248 237 249 - window.onscroll = function() { 250 - window.scrollTo(s.x, s.y); 251 - }; 252 - 253 238 return resizeLightBox(e); 254 239 } 255 240 ··· 259 244 } 260 245 var img = JX.DOM.find(lightbox, 'img'); 261 246 var v = JX.Vector.getViewport(); 262 - var s = JX.Vector.getScroll(); 263 247 var d = JX.Stratcom.getData(img); 264 248 265 249 var w = d.x;