New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 792118 link

Starred by 2 users
Status: WontFix
Owner: ----
Closed: Jan 2018
Cc:
█ krajshree@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Absolute positioned element inside centered element with negative margin interacts incorrectly with toggling style attributes

Reported by robbie.c...@gmail.com, Dec 5 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce the problem:
1. Open the attached html file
2. Open develop tools
3. Select the <i>
4. Observe where the bug icon is on the page
5. Disable display:inline
6. Disable and re-enable position:absolute
7. Observe that the bug icon is in a different position from when the page loaded
8. Re-enable display:inline
9. Observice that the bug icon is still in a different position from when the page loaded
10. Disable and re-enable position:absolute
11. Observe that the bug icon is back where it was at 4

What is the expected behavior?
At 9 I would expect the icon to be moved back to where it is at 4.

Additionally

What went wrong?
The positioning seems to be depend upon the order in which the CSS rules were toggled on and off.

Did this work before? N/A 

Chrome version: 62.0.3202.94  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

Also observed in: Version 65.0.3285.0 (Official Build) canary (64-bit)
And in Firefox: 57.0.1 (64-bit)
bug.html
557 bytes View Download
bug.css
264 bytes View Download

Comment 1 by krajshree@chromium.org, Dec 8 2017

Cc: krajshree@chromium.org
Labels: Needs-Triage-M62 Triaged-ET Needs-Feedback
Unable to reproduce the issue on mac 10.12.6 using chrome reported version #62.0.3202.94 and latest canary #65.0.3287.0.

Attached a screen cast for reference.

Following are the steps followed to reproduce the issue.
------------
1. Opened the attached html file
2. Opened dev tools
3. Selected the <i>
4. Observed the bug icon is on the page
5. Disabled display:inline
6. Disabled and re-enabled position:absolute. Observed that on disabling the position:absolute the bug position changed and on enabling it came to its original position.
7. Re-enabled display:inline and observed that the bug icon it at its original place where it was before as expected.

robbie.coomber@ - Could you please check the screen cast and please let us know if anything missed from our side to reproduce the issue.

Thanks...!!
792118.webm
14.0 MB View Download

Comment 2 by paulir...@chromium.org, Dec 8 2017

Components: -Platform>DevTools Blink>Layout
I can reproduce this with the devtools docked to bottom. (giving a wider viewport). Fascinating.

simplified the repro a bit more:

1. open https://output.jsbin.com/yihixec/quiet
2. open devtools and dock it to bottom
3. evaluate this in console:

// setup
wait = _ => new Promise(res => setTimeout(res, 100));
x = document.querySelector('i')

// noop. sets the styles that are already applied.
x.style.position = 'absolute'; await wait();  x.style.display = 'inline'; await wait(); 

// regress the styles
x.style.position = 'relative'; await wait();  x.style.display = 'block'; await wait();   
// return them back to original
x.style.position = 'absolute'; await wait();  x.style.display = 'inline'; await wait(); 

----------------------

It's got me stumped. :)  Over to Layout team, as this isn't a DevTools bug.

Comment 3 by e...@chromium.org, Jan 29 2018

Status: WontFix (was: Unconfirmed)
Unable to reproduce.
►

Sign in to add a comment