From 4596e3876b5f44ccda24ba11745032c090467580 Mon Sep 17 00:00:00 2001 From: epriestley Date: Tue, 23 Oct 2012 12:00:37 -0700 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 56 +++++++++---------- .../rsrc/css/aphront/lightbox-attachment.css | 13 +++-- webroot/rsrc/css/core/core.css | 2 +- .../core/behavior-lightbox-attachments.js | 20 +------ 4 files changed, 39 insertions(+), 52 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 5ff9cbd353..39968d0be2 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -1385,7 +1385,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-lightbox-attachments' => array( - 'uri' => '/res/0cfebd8a/rsrc/js/application/core/behavior-lightbox-attachments.js', + 'uri' => '/res/6ddb05f8/rsrc/js/application/core/behavior-lightbox-attachments.js', 'type' => 'js', 'requires' => array( @@ -2237,7 +2237,7 @@ celerity_register_resource_map(array( ), 'lightbox-attachment-css' => array( - 'uri' => '/res/136d479b/rsrc/css/aphront/lightbox-attachment.css', + 'uri' => '/res/b931ca15/rsrc/css/aphront/lightbox-attachment.css', 'type' => 'css', 'requires' => array( @@ -2396,7 +2396,7 @@ celerity_register_resource_map(array( ), 'phabricator-core-css' => array( - 'uri' => '/res/6710c9ba/rsrc/css/core/core.css', + 'uri' => '/res/768cc6eb/rsrc/css/core/core.css', 'type' => 'css', 'requires' => array( @@ -3070,7 +3070,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '4322f368' => + 'a4d32081' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3099,7 +3099,7 @@ celerity_register_resource_map(array( 21 => 'phabricator-flag-css', 22 => 'aphront-error-view-css', ), - 'uri' => '/res/pkg/4322f368/core.pkg.css', + 'uri' => '/res/pkg/a4d32081/core.pkg.css', 'type' => 'css', ), 'f5ccc73b' => @@ -3266,20 +3266,20 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '7839ae2d', - 'aphront-crumbs-view-css' => '4322f368', - 'aphront-dialog-view-css' => '4322f368', - 'aphront-error-view-css' => '4322f368', - 'aphront-form-view-css' => '4322f368', + 'aphront-crumbs-view-css' => 'a4d32081', + 'aphront-dialog-view-css' => 'a4d32081', + 'aphront-error-view-css' => 'a4d32081', + 'aphront-form-view-css' => 'a4d32081', 'aphront-headsup-action-list-view-css' => '2ba14b3d', - 'aphront-headsup-view-css' => '4322f368', - 'aphront-list-filter-view-css' => '4322f368', - 'aphront-pager-view-css' => '4322f368', - 'aphront-panel-view-css' => '4322f368', - 'aphront-side-nav-view-css' => '4322f368', - 'aphront-table-view-css' => '4322f368', - 'aphront-tokenizer-control-css' => '4322f368', - 'aphront-tooltip-css' => '4322f368', - 'aphront-typeahead-control-css' => '4322f368', + 'aphront-headsup-view-css' => 'a4d32081', + 'aphront-list-filter-view-css' => 'a4d32081', + 'aphront-pager-view-css' => 'a4d32081', + 'aphront-panel-view-css' => 'a4d32081', + 'aphront-side-nav-view-css' => 'a4d32081', + 'aphront-table-view-css' => 'a4d32081', + 'aphront-tokenizer-control-css' => 'a4d32081', + 'aphront-tooltip-css' => 'a4d32081', + 'aphront-typeahead-control-css' => 'a4d32081', 'differential-changeset-view-css' => '2ba14b3d', 'differential-core-view-css' => '2ba14b3d', 'differential-inline-comment-editor' => '8136e4a6', @@ -3345,15 +3345,15 @@ celerity_register_resource_map(array( 'javelin-workflow' => 'f5ccc73b', 'maniphest-task-summary-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d', - 'phabricator-app-buttons-css' => '4322f368', + 'phabricator-app-buttons-css' => 'a4d32081', 'phabricator-content-source-view-css' => '2ba14b3d', - 'phabricator-core-buttons-css' => '4322f368', - 'phabricator-core-css' => '4322f368', - 'phabricator-directory-css' => '4322f368', + 'phabricator-core-buttons-css' => 'a4d32081', + 'phabricator-core-css' => 'a4d32081', + 'phabricator-directory-css' => 'a4d32081', 'phabricator-drag-and-drop-file-upload' => '8136e4a6', 'phabricator-dropdown-menu' => 'f5ccc73b', - 'phabricator-flag-css' => '4322f368', - 'phabricator-jump-nav' => '4322f368', + 'phabricator-flag-css' => 'a4d32081', + 'phabricator-jump-nav' => 'a4d32081', 'phabricator-keyboard-shortcut' => 'f5ccc73b', 'phabricator-keyboard-shortcut-manager' => 'f5ccc73b', 'phabricator-menu-item' => 'f5ccc73b', @@ -3361,11 +3361,11 @@ celerity_register_resource_map(array( 'phabricator-paste-file-upload' => 'f5ccc73b', 'phabricator-prefab' => 'f5ccc73b', 'phabricator-project-tag-css' => '7839ae2d', - 'phabricator-remarkup-css' => '4322f368', + 'phabricator-remarkup-css' => 'a4d32081', 'phabricator-shaped-request' => '8136e4a6', - 'phabricator-standard-page-view' => '4322f368', + 'phabricator-standard-page-view' => 'a4d32081', 'phabricator-tooltip' => 'f5ccc73b', - 'phabricator-transaction-view-css' => '4322f368', - 'syntax-highlighting-css' => '4322f368', + 'phabricator-transaction-view-css' => 'a4d32081', + 'syntax-highlighting-css' => 'a4d32081', ), )); diff --git a/webroot/rsrc/css/aphront/lightbox-attachment.css b/webroot/rsrc/css/aphront/lightbox-attachment.css index 594e4b0320..ed2235997a 100644 --- a/webroot/rsrc/css/aphront/lightbox-attachment.css +++ b/webroot/rsrc/css/aphront/lightbox-attachment.css @@ -2,21 +2,24 @@ * @provides lightbox-attachment-css */ + .lightbox-attached { - height: 100%; - overflow-y: hidden; + overflow: hidden; + } .lightbox-attachment { position: fixed; - top: 44px; + top: 0; left: 0; + bottom: 0; + right: 0; z-index: 12; - width: 100%; + overflow-y: auto; } .lightbox-attachment img { - margin: 12px auto 0px auto; + margin: 50px auto 0; } .lightbox-attachment .loading { diff --git a/webroot/rsrc/css/core/core.css b/webroot/rsrc/css/core/core.css index 65b0794615..b96c2abe12 100644 --- a/webroot/rsrc/css/core/core.css +++ b/webroot/rsrc/css/core/core.css @@ -3,7 +3,7 @@ */ -html { +body { /* Always show the vertical scrollbar so that going from a page without a scrollbar to a page with a scrollbar doesn't make content jump a few pixels left when the viewport narrows. */ diff --git a/webroot/rsrc/js/application/core/behavior-lightbox-attachments.js b/webroot/rsrc/js/application/core/behavior-lightbox-attachments.js index 660d6db5ec..0cac8eb164 100644 --- a/webroot/rsrc/js/application/core/behavior-lightbox-attachments.js +++ b/webroot/rsrc/js/application/core/behavior-lightbox-attachments.js @@ -15,7 +15,6 @@ JX.behavior('lightbox-attachments', function (config) { var next = null; var x_margin = 40; var y_margin = 100; - var onscroll = window.onscroll; var downloadForm = JX.$H(config.downloadForm); function loadLightBox(e) { @@ -88,21 +87,13 @@ JX.behavior('lightbox-attachments', function (config) { ); JX.DOM.appendContent(lightbox, name_element); - var s = JX.Vector.getScroll(); - var closeIcon = ''; - // Don't show the close icon if the beautiful header is - // still mostly present. Optimizes for common case of - // clicking on an attachment in object detail view without - // scrolling. - if (s.y >= 22) { - closeIcon = JX.$N('a', + var closeIcon = JX.$N('a', { className : 'lightbox-close', href : '#' } ); - JX.DOM.listen(closeIcon, 'click', null, closeLightBox); - } + JX.DOM.listen(closeIcon, 'click', null, closeLightBox); JX.DOM.appendContent(lightbox, closeIcon); var leftIcon = ''; if (next) { @@ -225,7 +216,6 @@ JX.behavior('lightbox-attachments', function (config) { lightbox = null; prev = null; next = null; - window.onscroll = onscroll; } function loadAnotherLightBox(el, e) { @@ -243,13 +233,8 @@ JX.behavior('lightbox-attachments', function (config) { } var img = JX.DOM.find(lightbox, 'img'); var d = JX.Vector.getDim(img); - var s = JX.Vector.getScroll(); JX.Stratcom.addData(img, { x : d.x, y : d.y } ); - window.onscroll = function() { - window.scrollTo(s.x, s.y); - }; - return resizeLightBox(e); } @@ -259,7 +244,6 @@ JX.behavior('lightbox-attachments', function (config) { } var img = JX.DOM.find(lightbox, 'img'); var v = JX.Vector.getViewport(); - var s = JX.Vector.getScroll(); var d = JX.Stratcom.getData(img); var w = d.x;