1423902 - position relative element has height=0 in certain situation

Status: NEW

(Core :: Layout, defect, P3)

Description

[50.ratulsaha]

Attachment: Screenshots displaying the rendering issue.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

Rendered a <img /> using base64 data.


Actual results:

Base64 image didn't render. 


Expected results:

Image should have rendered correctly as it is in chromium and MS Edge.

Comment 1

[Tooru Fujisawa [:arai]]

can you provide a testcase that demonstrates the issue?
if the website is not publicly accessible, can you create a minimal testcase on jsfiddle or somewhere, or attach HTML file?

Comment 2

[50.ratulsaha]

It's a React JS application. I'm isolating the component and creating a demo using that. Please wait.

Comment 3

[50.ratulsaha]

(In reply to Tooru Fujisawa [:arai] from comment #1)
> can you provide a testcase that demonstrates the issue?
> if the website is not publicly accessible, can you create a minimal testcase
> on jsfiddle or somewhere, or attach HTML file?

Here is the demo

https://firefox-bug-report-1423902.netlify.com/

Steps to reproduce.

1) Click on Upload image (click me).
2) Upload image.
3) Click on upload image.
4) Full Size image show display in a pseudo popup.

Comment 4

[50.ratulsaha]

(In reply to 50.ratulsaha from comment #3)
> (In reply to Tooru Fujisawa [:arai] from comment #1)
> > can you provide a testcase that demonstrates the issue?
> > if the website is not publicly accessible, can you create a minimal testcase
> > on jsfiddle or somewhere, or attach HTML file?
> 
> Here is the demo
> 
> https://firefox-bug-report-1423902.netlify.com/
> 
> Steps to reproduce.
> 
> 1) Click on Upload image (click me).
> 2) Upload image.
> 3) Click on uploaded image.
> 4) Full Size image should display in a pseudo popup.

Expected: Uploaded image should load in popup as it does in other browsers.
Actual: Image doesn't load.

Comment 5

[Tooru Fujisawa [:arai]]

thanks.
confirmed it and the issue seems to be layout or css.

Comment 6

[Tooru Fujisawa [:arai]]

Attachment: possible minimal testcase

in the testcase in comment #3, div.pdfview-wrapper has height=0

in this minimal testcase #C element has height=0.

Comment 7

[Mats Palmgren (inactive)]

Removing the DOCTYPE makes it work, fwiw.

Comment 8

[Xidorn Quan [:xidorn] UTC+10]

Also not that changing position of #C to static also produces zero height, while in Chrome, it produces 100%.

IIUC, position:relative element should be positioned and sized the same way as position:static when there is no top/right/bottom/left, and indeed when setting #C to have position:static, Chrome also produces 100%, so the problem here is probably how we should size a normal 100% height block (unrelated to relative), although when position is static, descendant would not be clipped.

(In reply to Mats Palmgren (:mats) from comment #7)
> Removing the DOCTYPE makes it work, fwiw.

This indicates that there is some handling which Gecko treats as quirks while other browsers accept in standard mode. That probably means we already have the code for this behavior and we just need to change its condition?

Comment 9

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)