microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
163.57k stars 29.02k forks source link

Page move up and down unexpectly when using side preview #110711

Closed Hocnonsense closed 3 years ago

Hocnonsense commented 3 years ago

more:

版本: 1.51.1 (system setup)
提交: e5a624b788d92b8d34d1392e4c4d9789406efe8f
日期: 2020-11-10T23:34:32.027Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19042

Steps to Reproduce:

  1. SET "editor.cursorSurroundingLines": 50
  2. edit a .md file with several pictures
  3. enable markdown preview. When use UP and DOWN to read or edit the file, the page will jump randomly...
  4. Now drow up the preview page with two fingers. When a second picture raise from bottom, the first picture suddenly jumped back.
  5. meanwhile, when moving the source .markdown or preview, the two file don't match.
    • moving preview: moving preview
    • moving source file: image

Does this issue occur when all extensions are disabled?: Yes/No

Hocnonsense commented 3 years ago

test file:

### Fig.1
- ### Overview of SIFT.
- ![](https://media.springernature.com/full/springer-static/image/art%3A10.1038%2Fs41592-019-0620-7/MediaObjects/41592_2019_620_Fig1_HTML.png)
- `a` | Schematic of the screening process.
    - Any *pooled library or complex culture* (mixture of colored ovals)
        - can be
            - loaded into the microfluidic device and
            - characterized by long-term time-lapse microscopy.
    - After *phenotyping*,
        - cells of interest (red cylinders) are
            - transported by optical trapping to a clean area on the chip
                - -- previously sterilized with the support of a series of push-down valves --
            - and individually collected from the device without cross-contamination.
    - Isolated cells may be propagated for **any** downstream off-chip analysis.
- `b`
    - A hypothetical example of two different genotypes
        - (represented by generic wild-type (`W`) and mutant (`M`) forms)
        - that are frequently mischaracterized by individual single-cell snapshots (colored circles).
    - Only
        - by estimating the *full distributions of the phenotypic property* (right panel),
        - by assaying the same genotypes over *long periods of time* (left panel),
        - are the correct classifications reliably assigned.

### Fig.2
- ### Cell retrieval principles of the SIFT platform.
- ![](https://media.springernature.com/full/springer-static/image/art%3A10.1038%2Fs41592-019-0620-7/MediaObjects/41592_2019_620_Fig2_HTML.png)
- `a`
    - A macroscopic image of the entire microfluidic chip,
        - loaded with dyes for visualization,
        - is shown in the `left panel`.
        - `Dotted boxes` correspond to regions represented in other panels.
            - `Scale bar`, 5 mm.
    - A schematic overview of the single-cell isolation process
        - is shown in the `right panel`,
        - corresponding
            - to a not-to-scale representation
            - of the `blue boxed region` from the left panel.
        - Cell(s) from a lineage of interest
            - (marked by `red star`)
            - are optically trapped and transported to a *clean section of the chip*
                - -- segregated by a series of **collection valves** (`green box`) --
                - for further *characterization* and/or immediate *collection*.
- `b` | Kymograph of cell transportation via *optical trapping*.
    - An $Escherichia~ coli$ cell of interest
        - is
            - removed from a growth trench (leftmost two panels) and
            - *dragged through* an open **collection valve** (rightmost two panels) for off-chip collection.
    -   - `White circles` mark the optical trap position;
        - `dotted arrows` indicate the movement direction of the trapped cell.
    - Similar cell transfers were *performed more than 200 times across 5 independent screening runs* with similar results. Scale bar, 5 µm.
- `c` | On-chip inlet-cleaning valve infrastructure.
    - A top-down representation of
        - the entrances for one *microfluidic lane*
            - (`left panel`; magnified representation of the orange dotted box from the left panel of a)
        - shows deposited bacterial biofilms
            - cleaned by circulated bleach (`arrows`),
        - while downstream cells residing in growth cavities
            - are protected by a closed push-down valve (`red indented box`).
    - A cross-sectional view of the *push-down valves*
        - (`right panel`; magnified depiction of dotted grey box in the left panel) shows valve actuation.
        - *Pressurization of a ceiling chamber* causes deflection of a thin PDMS layer that pinches flow channels (yellow) closed.
- `d`
    - Images of a feeding lane inlet
        - before (`left panel`) and after (`right panel`) biofilm removal
        - by the chip-cleaning procedure outlined in `c`.
    - Similar results were observed across five independent screening runs. Scale bar, 25 µm.

### Fig.3
- ### Clean, reliable isolation of live individual cells by SIFT.
- ![](https://media.springernature.com/full/springer-static/image/art%3A10.1038%2Fs41592-019-0620-7/MediaObjects/41592_2019_620_Fig3_HTML.png)
- `a`
    - Sample fields-of-view from the mock color screen
        - comprised of *overlaid phase contrast* and *fluorescence images*.
    - $E.~ coli$ were
        - engineered to constitutively express either red, yellow, cyan or no fluorescent protein (*RFP*, *YFP*, *CFP* or no *FP*), and
        - mixed to a ratio of 1:1:1:100, respectively.
    - Scale bar, 5 µm.
- `b`
    - Collection of the chip flow-through
        - prior to SIFT screening the mock library of mixed colored cells (*left panel*).
    - Three out of three individual cells were isolated from each targeted lineage in the intended sequence.
    - Each agar well is a plating of an independent collection bin; numbers denote the order of collection. Similar results were observed across three independent mock screening runs. Scale bars, 10 mm.
- `c`
    - Number of genomic mutations specific to 15 isolated single cells transported via an optical trap for 15 s, 30 s and 75 s (the standard trapping time, two-times longer and five-times longer, respectively). All cells were continuously moved for the entire duration of the respective trapping times to mimic screening transportations, as shown in the schematic. Data were gathered from a single screening run.
- `d`
    - Growth-rate-derived generation times immediately following optical transport for varying times, ranging from just over the standard trapping time (15 s) to greater than 5 times longer. Mean generation times (red circles) were measured over a 12-h observation period, with error bars as s.e.m. Mean generation time of 50 non-trapped cells (dotted line; μ) and twice the standard deviation (shaded region; 2σ) represent natural growth heterogeneity within the same experiment. Data were gathered from a single screening run.

### Fig.4
- ### Genetic screen of a dual-feedback oscillator library.
- ![](https://media.springernature.com/full/springer-static/image/art%3A10.1038%2Fs41592-019-0620-7/MediaObjects/41592_2019_620_Fig4_HTML.png)
- `a`
    - The **dual-feedback oscillator** with linked positive and negative feedback loops (`top left panel`).
    - All circuit genes,
        - including the GFP reporter,
        - were encoded
            - on *two plasmids*, transcriptionally regulated by **identical $P_{lac/ara-1}$ hybrid promoters**, and
            - marked for protein degradation by SsrA (LAA) tags in $E.~ coli$ (top right panel).
    - Library mutations
        - were targeted to *promoter, operator and RBS sites*
            - of both $lacI$ and $araC^{const}$, the araC gene with a point mutation (Y13H) conferring constitutive activator functionality (bottom panel).
- `b`
    - Statistical estimates of period CV and mean period of all library variants with oscillatory-like signals over a 24-h period using SIFT (Nosc = 7,803).
    - Variants selected to highlight phenotypic diversity (`grey circles` with `roman numerals`) have time-traces shown in `c`.
        - `Red circles` represent variants that were isolated, some of which were individually characterized in a follow-up mother machine run.
    - Mean generation time was 25 min. Library phenotype data were gathered from a single screening run.
- `c`
    - Time-traces of selected variants, as described in `b`.
    - `Orange dots` indicate called peaks. 
    - `<T>`, mean period; `CVT`, period CV; `a.u.`, arbitrary units.
- `d`
    - Representative time-traces of the original dual-feedback circuit (SL126) and the best-performing (that is, with the lowest period CV) isolated mutant (SL278), characterized in the mother machine under conditions without any supplemented IPTG or arabinose.
Hocnonsense commented 3 years ago

Is it caused by editing Microsoft VS Code\resources\app\extensions\markdown-language-features\media\markdown.css ? I know it is not so good, but you don't provide a convenient way to edit markdown style... Edited css file:

:root { /* barfi.css*/
  --bg-color: #1e1e1e;
  --text-color: #a1a1a1;
  --window-border-color: #333;
  --window-border: 1px solid #555;
  --md-char-color: #C7C5C5;
  --meta-content-color: #5b808d;

  --blur-text-color: #C8C8C8;

  --drag-placeholder-color: #c7c5c5;
  --panel-border-color: #777777;
  --active-toggle-btn-color: #ddd;
  --table-border-color: #ccc;

  --primary-color: #428bca;
  --primary-btn-border-color: #285e8e;
  --primary-btn-text-color: #fff;

  --search-select-bg-color: #000;
  --search-select-text-color: #fff;

  --heading-char-color: #ddd;
  --color-popover-bg-color: #fafafa;

  --control-text-color: var(--text-color);
  --control-text-hover-color: var(--text-color);

  /* Side Bar */
  --side-bar-bg-color: #1a1a1a;
  --item-hover-bg-color: #111;
  --item-hover-text-color: #7c929e;
  --side-bar-fg-color: #DADCE0;

  --side-bar-menu-active-tint: var(--side-bar-menu-active-tint);

  --mac-title-bar-height: 20px;
  --sidebar-width: 270px;

  /* Side-bar file list */
  --active-file-bg-color: #283139;
  --active-file-text-color: #7c929e;
  --active-file-left-border-color: #7fa8f0;
  --active-file-border-color: rgba(91, 112, 130, 0.47);
  --focus-ring-color: #6eace2;
  --file-item-file-name-color: #7c929e;
  --file-item-summary: #616161;

  /* Outline */
  --outline-border-color: #363B40;
  --outline-item-hover-bg-color: #363B40;
  --outline-item-hover-fg-color: white;

  /* Sidebar footer */
  --sidebar-footer-bg-color: #131516;
  --sidebar-footer-heading-color: #7c929e;
  --sidebar-footer-fg-color: #818181;

  /* TOC Drop down */
  --toc-dropmenu-bg-color: #131516;
  --toc-dropmenu-fg-color: #9aa0a6;

  --monospace: monospace;
}

html,
body {
  font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
  font-size: var(--vscode-markdown-font-size, 14px);
  padding: 0 26px; /* 上(下左右) 右(左) 下 左 */
  line-height: var(--vscode-markdown-line-height, 22px);
  word-wrap: break-word;
}

#code-csp-warning {
  position: fixed;
  top: 0;
  right: 0;
  color: white;
  margin: 16px;
  text-align: center;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #444444;
  cursor: pointer;
  padding: 6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

#code-csp-warning:hover {
  text-decoration: none;
  background-color: #007acc;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
}

body.scrollBeyondLastLine {
  margin-bottom: calc(100vh - 22px);
}

body.showEditorSelection .code-line {
  position: relative;
}

body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -12px;
  height: 100%;
}

body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
  left: -30px;
}

.vscode-light.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

.vscode-dark.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(255, 255, 255, 0.60);
}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

.vscode-high-contrast.showEditorSelection .code-active-line:before {
  border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
  border-left: 3px solid rgba(255, 160, 0, 1);
}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
  border-left: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

a {
  color: #C8C8C8;
  text-decoration: none;
  border: solid 1px var(--window-border-color);
  border-color: #285e8e;
}

a:hover {
  text-decoration: underline;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 1px solid -webkit-focus-ring-color;
  outline-offset: -1px;
}

hr { /* 分割线 */
  border: 0;
  height: 2px;
  border-bottom: 2px solid;
}

/* 标题 */
h1, h2, h3, h4,  h6 {
  margin: 0px;
}

h1 {
  padding-bottom: 0.3em;
  line-height: 1.2;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: 32px;
  margin: 8px 0px;
  font-weight: bolder;
  text-align: center;
}

h2 {
  font-size: 28px;
  font-weight: 500;
  margin: 4px 0px;
}

h3 {
  font-size: 24px;
  font-weight: bolder;
}

h4{
  font-size: 20px;
  font-weight: 400;
  margin-left: 1em;
}

h5{
  font-size: var(--vscode-markdown-font-size, 14px);;
}

h6{
  font-size: var(--vscode-markdown-font-size, 14px);
  color: #B8D7A3;
}

p, ul, dd, ol, hr, address, pre, table, iframe{
  /* ul: 无序列表, ol:无序列表, pre: 定义预格式文本 */
  margin: 4px, 0px;
}

b, dt, strong{ /* b: 粗体, strong: 定义着重文字,与<b></b>效果相同 */
  color: rgb(255, 96, 32);
  font-weight: bolder;
}

i { /*定义斜体*/
  opacity: unset;
}

em { /* 定义加重语气,与<i></i>效果相同 */
  color: #1dccf8;
  font-family: "Times New Roman", "楷体";
  font-size: var(--vscode-markdown-font-size, 16px);
}

mark {
  background: #ace056;
}

/* Table related */
table {
  border-collapse: collapse;
/**
 * 有些 table 有外框, 可能是因为:
  border: solid 1px var(--window-border-color);
  margin-bottom: 20px
 */
}

th { /* 表头 */
  color: #439e30;
  font-weight: 500;
}

table>thead>tr>th {
  text-align: left;
  border-bottom: 1px solid;
}

table>thead>tr>th,
table>thead>tr>td,
table>tbody>tr>th,
table>tbody>tr>td {
  padding: 5px 10px;
}

table>tbody>tr+tr>td {
  border-top: 1px solid;
}

table tr:nth-child(even) { /** 偶数行变色 */
  color: #B8D7A3;
  /*background: var(--side-bar-bg-color);*/
}

/* 引用块 */
blockquote {
  margin: 0;
  padding: 0 1em 0 1em; /* padding 上下有值之后会合并相邻的块, 但会很丑 */
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 0 1em 0 1.5em; /* 圆角 */
}

code {
  font-family: "Fira Code Retina", Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
  font-size: 1em;
  line-height: 1.357em;
}

body.wordWrap pre {
  white-space: pre-wrap;
}

pre:not(.hljs),
pre.hljs code>div {
  padding: 16px;
  border-radius: 3px;
  overflow: auto;
}

pre code {
  color: var(--vscode-editor-foreground);
  tab-size: 4;
}

/** Theming */

.vscode-light pre {
  background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
  background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
  background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
  border-color: rgb(0, 0, 0);
}

.vscode-light table>thead>tr>th {
  border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table>thead>tr>th {
  border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table>tbody>tr+tr>td {
  border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table>tbody>tr+tr>td {
  border-color: rgba(255, 255, 255, 0.18);
}

/*
https://raw.githubusercontent.com/isagalaev/highlight.js/master/src/styles/vs2015.css
*/
/*
 * Visual Studio 2015 dark style
 * Author: Nicolas LLOBERA <nllobera@gmail.com>
 */

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}

.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}

.hljs-number,
.hljs-class {
  color: #B8D7A3;
}

.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/*.hljs-code {
    font-family:'Monospace';
}*/

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: var(--vscode-diffEditor-insertedTextBackground, rgba(155, 185, 85, 0.2));
  color: rgb(155, 185, 85);
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background: var(--vscode-diffEditor-removedTextBackground, rgba(255, 0, 0, 0.2));
  color: rgb(255, 0, 0);
  display: inline-block;
  width: 100%;
}

/**
 * From hightlight.css
/*
From https://raw.githubusercontent.com/isagalaev/highlight.js/master/src/styles/vs.css
*/
/*

Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>

*/

.vscode-light .hljs-function,
.vscode-light .hljs-params,
.vscode-light .hljs-number,
.vscode-light .hljs-class {
  color: inherit;
}

.vscode-light .hljs-comment,
.vscode-light .hljs-quote,
.vscode-light .hljs-number,
.vscode-light .hljs-class,
.vscode-light .hljs-variable {
  color: #008000;
}

.vscode-light .hljs-keyword,
.vscode-light .hljs-selector-tag,
.vscode-light .hljs-name,
.vscode-light .hljs-tag {
  color: #00f;
}

.vscode-light .hljs-built_in,
.vscode-light .hljs-builtin-name {
  color: #007acc;
}

.vscode-light .hljs-string,
.vscode-light .hljs-section,
.vscode-light .hljs-attribute,
.vscode-light .hljs-literal,
.vscode-light .hljs-template-tag,
.vscode-light .hljs-template-variable,
.vscode-light .hljs-type {
  color: #a31515;
}

.vscode-light .hljs-selector-attr,
.vscode-light .hljs-selector-pseudo,
.vscode-light .hljs-meta,
.vscode-light .hljs-meta-keyword {
  color: #2b91af;
}

.vscode-light .hljs-title,
.vscode-light .hljs-doctag {
  color: #808080;
}

.vscode-light .hljs-attr {
  color: #f00;
}

.vscode-light .hljs-symbol,
.vscode-light .hljs-bullet,
.vscode-light .hljs-link {
  color: #00b0e8;
}

.vscode-light .hljs-emphasis {
  font-style: italic;
}

.vscode-light .hljs-strong {
  font-weight: bold;
}
yume-chan commented 3 years ago

I have the same issue and never edited markdown.css.

You can use the markdown.styles setting to customize the preview.

Hocnonsense commented 3 years ago

So its not my fault~

BTW, I edited and a warning raized:

无法加载 "markdown.styles": C:\\Users\\Hwrn0\\markdown.css

How can I set a global markdown.css? Thanks!

yume-chan commented 3 years ago

I remember it used to work with any files, however now it only allows files within the workspace and https URLs (see #101991, #99280, #96201, #77290 and more).

So one way might be serving your file from a https server (github raw doesn't work, see #82924), and another (harder) way is to build an extension to do that.

mjbvz commented 3 years ago

Duplicate of #108582