CSS adding inline-block after render ignores top %
Reported by
curtas...@gmail.com,
Oct 25 2017
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 Steps to reproduce the problem: 1. https://jsfiddle.net/oru1uvr7/ <html> <body> <div style='height:555px;background:gray'> <div id=t style='position:relative;top:50%'> This text moves to the top when inline-block is added after render. </div> </div> <script> //document.getElementById('t').style.display='inline-block'//Text is centered if you do it this way. setTimeout(function(){document.getElementById('t').style.display='inline-block'}, 333) </script> </body> </html> 2. Use code like this to make a container with fixed height and an inner div with position relative and the top is set to a percentage. 3. Add inline-block to the inner div after the page renders. With the dev tools or with javascript. What is the expected behavior? The text should stay vertically centered regardless of when/if you add inline-block. Compare to FireFox and Internet Explorer. What went wrong? The text moved to the top of the container. Did this work before? N/A Chrome version: 61.0.3163.100 Channel: n/a OS Version: 10.0 Flash Version: Shockwave Flash 27.0 r0
,
Nov 1 2017
,
Nov 2 2017
Seems like possibly a layout issue. Feel free to ping it back if it's not.
,
Nov 2 2017
Actually I changed my mind. Putting it back under CSS.
Inspecting the div shows that with the first way of changing the display value
document.getElementById('t').style.display='inline-block'
the computed value for top is 277.5px, and with the second way
setTimeout(function(){document.getElementById('t').style.display='inline-block'}, 333)
it's 9px.
,
Nov 2 2017
,
Nov 2 2017
,
Nov 27 2017
,
Nov 27
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 3
|
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by divya.pa...@techmahindra.com
, Oct 26 2017Labels: Triaged-ET M-64 PlatformDevtools Needs-Triage-M61 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)