Commit 0a628166 authored by Kathleen Brade's avatar Kathleen Brade Committed by Georg Koppen
Browse files

Bug 28836: Links on about:tor are not clickable.

When the about:tor window was short, links such as the Tor Browser
manual one were not clickable (the fundraising banner made this
problem more likely). The root cause was that the onions/circles
at the bottom of the page overlapped with the links, and the divs
that were used to generate the circles were in front of the links.

This patch changes the behavior on desktop to not allow the onions
to be placed under any page content; instead, they are displayed
at the bottom of the page after all other content. If they won't
fit on the page, a vertical scrollbar is shown.

On mobile, the existing behavior is preserved (onions can appear
behind content). We added `z-index: -1` to ensure that all tappable
content will be usable (although no links are currently displayed
on mobile, we might add some in the future).
parent 129149cf
<?xml version="1.0" encoding="UTF-8"?>
- Copyright (c) 2018, The Tor Project, Inc.
- Copyright (c) 2019, The Tor Project, Inc.
- See LICENSE for licensing information.
- vim: set sw=2 sts=2 ts=8 et syntax=xml:
......@@ -120,7 +120,7 @@ window.addEventListener("pageshow", function() {
- "onion-pattern-row" elements, each containing 14 circles. The width
- of "onion-pattern-row" is fixed at a value that is wide enough so the
- circles are not distorted by the flex-based layout. The parent
- "onion-pattern-container" element has overflow: hidden and is designed
- "onion-pattern-container" element has overflow-x: hidden and is designed
- to expand to the width of the page, until it reaches a maximum width
- that can accommodate all 14 circles. Since the rows are wider than
- most browser windows, typically the two rows of onions will fill the
* Copyright (c) 2018, The Tor Project, Inc.
* Copyright (c) 2019, The Tor Project, Inc.
* See LICENSE for licensing information.
* vim: set sw=2 sts=2 ts=8 et syntax=css:
......@@ -16,7 +16,13 @@
margin: 0px;
html {
height: 100%;
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0px auto;
......@@ -194,12 +200,15 @@ body:not([showmanual]) .showForManual {
.onion-pattern-container {
flex: auto; /* grow to consume remaining space on the page */
display: flex;
flex-direction: column;
justify-content: end; /* position circles at the bottom */
margin: 0px auto;
width: 100%;
max-width: 2200px; /* room for our 20 circles */
overflow: hidden;
position: absolute;
bottom: 0px;
min-height: 232px; /* room for 2 rows of circles */
overflow-x: hidden; /* clip extra circles on the sides */
.onion-pattern-row {
......@@ -386,10 +395,6 @@ body[show-donation-banner="true"] .onion-pattern-container {
transition: transform 0ms;
body[show-donation-banner="true"] .onion-pattern-container {
position: fixed;
body[show-donation-banner="true"] #torstatus-version,
body[show-donation-banner="true"] #onboarding-overlay-button {
transform: translateY(200px);
......@@ -431,6 +436,13 @@ body[mobile] .top .heading1 {
line-height: 1.1
body[mobile] .onion-pattern-container {
flex: none;
z-index: -1; /* ensure that circles do not block access to clickable links */
position: absolute;
bottom: 0px;
body[mobile] #donation-banner {
position: static;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment