Blockquotes longer than a single column cause an editor crash

[G-Ambatte]

Renderer

v3

Browser

Firefox

Operating System

Windows

What happened?

Reproduction:

1. Copy the text in the code block, including the leading space.
2. Paste this into the editor window in Firefox.
3. Add a > at the start of the text, causing the entire block of text to become a blockquote large enough to exceed the bounds of a single column.
4. Observe that the editor is no longer responding.

Immediate Resolution:

1. Close all browser tabs containing Homebrewery pages.
2. Once closed, open a new tab to the Homebrewery home page (https://homebrewery.naturalcrit.com).
3. Open Developer Tools (Ctrl+Shift+I).
4. Select STORAGE, then LOCAL STORAGE.
5. Right click the key homebrewery-new and select Delete homebrewery-new. Alternatively, edit the value of homebrewery-new so that blockquote no longer exceeds a single column.
6. Close Developer Tools and navigate to the Homebrewery new page (https://homebrewery.naturalcrit.com/new).

Permanent Resolution:

As yet undetermined.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc. Praesent gravida elit massa, sit amet facilisis libero rhoncus sed. Maecenas turpis nunc, pharetra sed magna id, cursus commodo nisi. Sed porta et ipsum nec lacinia. Curabitur volutpat semper ante, pretium imperdiet lectus egestas at. Proin pellentesque vel massa quis consequat. Donec nec arcu pretium lacus laoreet efficitur sed efficitur quam. Duis nec dolor eget augue pellentesque tempus non ultrices justo. Ut eget faucibus eros. Integer congue finibus ornare. Aliquam egestas sagittis neque, venenatis eleifend ligula maximus eu. Curabitur placerat orci vitae lorem interdum, sed elementum mi varius. Maecenas hendrerit eu augue sit amet ullamcorper. Curabitur accumsan mauris vulputate, consequat sem sit amet, ornare lacus. Donec in mi nec elit mollis tincidunt non sed elit. Curabitur volutpat urna lorem. In efficitur efficitur vulputate. Aenean bibendum lacus id rhoncus finibus. Nullam aliquet molestie nisl pharetra ornare. Nunc tincidunt tempor leo at mattis. Vestibulum tincidunt nunc sit amet erat varius tincidunt. Sed vitae purus posuere, maximus quam quis, commodo lorem. Nunc eu cursus neque. Mauris ac nisl commodo, fermentum dolor vitae, blandit ligula. Etiam sed vehicula nunc. Fusce ipsum neque, semper eget tortor tincidunt, feugiat consequat enim. In leo odio, pellentesque vitae ante sit amet, dapibus blandit lorem. Nullam sodales sodales placerat. Morbi convallis, tortor et pharetra tempus, dolor odio commodo lorem, non scelerisque ante libero sed sem. Donec orci lacus, finibus vitae tempor in, tincidunt a est. Donec dapibus sodales sem. Proin id porttitor leo. Curabitur vehicula volutpat malesuada. Sed laoreet nulla orci, vitae varius dolor tempus ac. Maecenas tincidunt molestie neque, a fermentum ipsum laoreet in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc.

[G-Ambatte]

Investigation shows that this hunk of styling appears to be cause:

.page blockquote, .page table {
	z-index: 15;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

From this, I assume that the same issue would arise from a sufficiently long table.

The following styling appears to fix this issue:

.page blockquote, .page table {
	z-index: 15;
	-webkit-column-break-inside: avoid;
	page-break-inside: auto;
	break-inside: auto;
}

As -webkit-column-break-inside is not supported by Firefox, in this testing it is Chrome only and thus not changed. It is entirely possible that this setting should also be set to auto, if only for cross-browser consistency.

[5e-Cleric]

Where is the blockquote involved in this issue? there is none in your example code block

[G-Ambatte]

In step 3, you add a > to the start of the line. This causes the entire line of text to be wrapped in a blockquote - per Markdown processing - and causes the crash.

[G-Ambatte]

Further testing shows the a table does NOT cause the same issue, although it also does not wrap to the next column.

| TEST TABLE |
|:-:|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc. Praesent gravida elit massa, sit amet facilisis libero rhoncus sed. Maecenas turpis nunc, pharetra sed magna id, cursus commodo nisi. Sed porta et ipsum nec lacinia. Curabitur volutpat semper ante, pretium imperdiet lectus egestas at. Proin pellentesque vel massa quis consequat. Donec nec arcu pretium lacus laoreet efficitur sed efficitur quam. Duis nec dolor eget augue pellentesque tempus non ultrices justo. Ut eget faucibus eros. Integer congue finibus ornare. Aliquam egestas sagittis neque, venenatis eleifend ligula maximus eu. Curabitur placerat orci vitae lorem interdum, sed elementum mi varius. Maecenas hendrerit eu augue sit amet ullamcorper. Curabitur accumsan mauris vulputate, consequat sem sit amet, ornare lacus. Donec in mi nec elit mollis tincidunt non sed elit. Curabitur volutpat urna lorem. In efficitur efficitur vulputate. Aenean bibendum lacus id rhoncus finibus. Nullam aliquet molestie nisl pharetra ornare. Nunc tincidunt tempor leo at mattis. Vestibulum tincidunt nunc sit amet erat varius tincidunt. Sed vitae purus posuere, maximus quam quis, commodo lorem. Nunc eu cursus neque. Mauris ac nisl commodo, fermentum dolor vitae, blandit ligula. Etiam sed vehicula nunc. Fusce ipsum neque, semper eget tortor tincidunt, feugiat consequat enim. In leo odio, pellentesque vitae ante sit amet, dapibus blandit lorem. Nullam sodales sodales placerat. Morbi convallis, tortor et pharetra tempus, dolor odio commodo lorem, non scelerisque ante libero sed sem. Donec orci lacus, finibus vitae tempor in, tincidunt a est. Donec dapibus sodales sem. Proin id porttitor leo. Curabitur vehicula volutpat malesuada. Sed laoreet nulla orci, vitae varius dolor tempus ac. Maecenas tincidunt molestie neque, a fermentum ipsum laoreet in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc. Praesent gravida elit massa, sit amet facilisis libero rhoncus sed. Maecenas turpis nunc, pharetra sed magna id, cursus commodo nisi. Sed porta et ipsum nec lacinia. Curabitur volutpat semper ante, pretium imperdiet lectus egestas at. Proin pellentesque vel massa quis consequat. Donec nec arcu pretium lacus laoreet efficitur sed efficitur quam. Duis nec dolor eget augue pellentesque tempus non ultrices justo. Ut eget faucibus eros. Integer congue finibus ornare. Aliquam egestas sagittis neque, venenatis eleifend ligula maximus eu. Curabitur placerat orci vitae lorem interdum, sed elementum mi varius. Maecenas hendrerit eu augue sit amet ullamcorper. Curabitur accumsan mauris vulputate, consequat sem sit amet, ornare lacus. Donec in mi nec elit mollis tincidunt non sed elit. Curabitur volutpat urna lorem. In efficitur efficitur vulputate. Aenean bibendum lacus id rhoncus finibus. Nullam aliquet molestie nisl pharetra ornare. Nunc tincidunt tempor leo at mattis. Vestibulum tincidunt nunc sit amet erat varius tincidunt. Sed vitae purus posuere, maximus quam quis, commodo lorem. Nunc eu cursus neque. Mauris ac nisl commodo, fermentum dolor vitae, blandit ligula. Etiam sed vehicula nunc. Fusce ipsum neque, semper eget tortor tincidunt, feugiat consequat enim. In leo odio, pellentesque vitae ante sit amet, dapibus blandit lorem. Nullam sodales sodales placerat. Morbi convallis, tortor et pharetra tempus, dolor odio commodo lorem, non scelerisque ante libero sed sem. Donec orci lacus, finibus vitae tempor in, tincidunt a est. Donec dapibus sodales sem. Proin id porttitor leo. Curabitur vehicula volutpat malesuada. Sed laoreet nulla orci, vitae varius dolor tempus ac. Maecenas tincidunt molestie neque, a fermentum ipsum laoreet in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis justo in lacinia ullamcorper. Etiam ac nunc enim. Vestibulum eu egestas purus, sit amet tincidunt tellus. Nam sem nibh, congue eget ligula eget, pulvinar finibus sem. Integer magna libero, placerat ac scelerisque in, gravida in orci. Aenean id purus eget neque aliquet ornare et id sapien. Fusce cursus pharetra ante sed gravida. Maecenas et tincidunt nulla. Pellentesque et pellentesque tortor. Donec posuere neque at blandit mollis. Pellentesque eget posuere nisl, vitae fermentum ex. Nulla facilisi. Nunc varius odio vitae arcu ultrices bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate volutpat elementum. Sed ultricies lacus nisi, ac consequat justo egestas a. Donec accumsan, enim non pretium consequat, purus nisi rutrum enim, vitae interdum nunc magna ut quam. Etiam ex dolor, efficitur nec elit at, cursus finibus mauris. Vivamus placerat sapien ut leo interdum vestibulum. Aenean turpis nibh, tempus pulvinar dapibus at, consectetur a orci. Pellentesque cursus, quam laoreet semper aliquam, libero nisl aliquet sapien, in elementum dui quam eu nunc. |