1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 14:52: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 2012-10-23 12:00:37 -07:00
parent 70dc3f5004
commit 4596e3876b
4 changed files with 39 additions and 52 deletions

View file

@ -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',
),
));

View file

@ -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 {

View file

@ -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. */

View file

@ -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;