mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
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
This commit is contained in:
epriestley
parent
70dc3f5004
commit
4596e3876b
4 changed files with 39 additions and 52 deletions
|
|
@ -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',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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. */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue