Upgrade StorageBug Report: Zotero breaks whole web site layout if the site uses grid layout for body element
Issue:
Zotero adds a non-zero sized iframe element to the body element without checking the styles of the web site.Steps to reproduce:
1. Install Chrome extension "Zotero Connector" from Chrome Webstore2. Click the Zotero Connector extension icon (if you cannot see it, click the "puzzle piece" icon at the end of URL bar) to enable Zotero Connector for all sites.
3. Load URL https://peda.net/
Expected result:
The web site should load normally.Actual result:
There's huge empty area near the start of the page and the actual site content can be found "below the fold".Root cause:
Zotero adds an iframe element to the body element without having rule "position:absolute" or "position:fixed". As this web site uses display:grid; for the body element, you cannot assume that blindly appending a sized element to the body element wouldn't affect the page rendering.If the added iframe element is supposed to be some kind of overlay, it should have either position:absolute or position:fixed to take if off the page content flow.
Additional details:
The web site uses following style for page layout<pre>
.rootservice.frontpage body {
grid:
"lmargin globalnav rmargin" auto
"lmargin searchxsinput rmargin" auto
"lmargin systemmessages rmargin" auto
"lmargin gap1 rmargin" var(--gapbeforeheader)
"lmargin header rmargin" auto
"lmargin main rmargin" minmax(0, 1fr)
"lmargin nav rmargin" minmax(0, auto)
"lmargin gap2 rmargin" var(--gap)
"lmargin footer rmargin" auto / auto minmax(10rem, 90rem) auto;
}
</pre>and Zotero blindly appending iframe element to the body element ends up reserving huge space for non-visible but non-zero-sized iframe that ends up on lmargin on systemmessages grid row. That box is expected to be small margin area so inserting big elements in that location causes major troubles for the layout.
The iframe element that Zotero adds is as follows:
<pre>
<iframe id="2wXOBPYl" src="chrome-extension://ekhagklcjbdpajgpjgmbionohlpdbjgc/translateSandbox/translateSandbox.html" frameborder="0" style="width: 100%; height: 949px;"></iframe>
</pre>Note the height which is expressed in pixels and there's no position:fixed or position:absolute.
In addition, the height is computed incorrect and the background for Zotero popups do not fill the whole page. The background seems to use height:100% which is not stable within grid layout.
If the intent is to make Zotero fill up the whole content area vertically, use display:fixed; combined with top:0; bottom:0; instead. And user overflow:auto within the inserted element to handle "too small display" problem.
At very minimum the iframe element added to the page content should have class attribute with the words "zotero connector" so that websites could workaround the issue by themselves.
Some keywords so that other people can find this page with a search: iframe CSS style layout problem grid layout page flow.