Closed Bug 1487829 Opened 6 years ago Closed 5 years ago

css attribute "top" not working until you update the value in the console

Categories

(Core :: Layout: Grid, defect)

Product:
Core
Component:
Layout: Grid
Version:
61 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME
Tracking Flags:
Tracking Status
firefox64 --- affected

People

(Reporter: pmarshall1993, Assigned: MatsPalmgren_bugz)

Details

Attachments

(2 files)

Testcase #2
673 bytes, text/html
Details
Original testcase
1.54 KB, text/html
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0 Build ID: 20180807170231 Steps to reproduce: Info is in this codepen. https://codepen.io/pmarshall1993/pen/WgRYpz Actual results: Top attribute doesn't work until you update the value. Expected results: Top attribute should work without updating the value - works as expected in chrome
Hi, I can reproduce this issue using the latest version of Nightly 64.0a1 (2018-09-04).
Status: UNCONFIRMED → NEW
status-firefox64: --- → affected
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
Product: Firefox → Core
I'm not very convinced this is an issue of the style system. It seems that switching the value between auto and a percentage triggers this bug (the column is placed on the bottom when switching to the percentage value), however, switching between one percentage and another percentage yields the right behavior. It's probably an incremental reflow bug in grid.
Component: CSS Parsing and Computation → Layout: Grid

The position of the "ticks-container" looks the same in Nightly and Chrome (v78) for me (on Linux), and I believe the rendering is correct for the given testcase.
Gecko had a known issue when changing the style of a rel.pos. grid item dynamically (which I fixed in bug 1576355), but that shouldn't have affected the original testcase (unless you modify the 'top' value in devtools, which is probably what Xidorn saw).

So, the reason you got different results in Chrome could have been a bug in Chrome that they have since fixed.

Attached file Testcase #2 —

FWIW, if you want to lay out two grid items on top of each other then you should consider placing them in the same grid area instead, as demonstrated in this testcase. It's a lot simpler.

The original testcase seems to work as expected for me, and it (now) renders the same in Chrome.

Assignee: nobody → mats
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → WORKSFORME
Attached file Original testcase —

(Here's the original testcase for posterity, in case the codepen disappears for some reason.)

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: