search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.48k stars 289 forks source link

bug: inline flex is reported as flex when style inspecting #207

Closed argyleink closed 5 years ago

adhrinae commented 5 years ago

During workarounds for another issue, I found that if the parent element of the target element have display: flex property, window.getComputedStyle ignores target element's display: inline-flex property.

https://github.com/GoogleChromeLabs/ProjectVisBug/blob/master/app/utilities/styles.js#L14

I'd like to get into this issue more. but is there any other strategies not using window.getComputedStyle for getting target element's style?

argyleink commented 5 years ago

there are! but with a tradeoff

https://github.com/GoogleChromeLabs/ProjectVisBug/blob/master/app/features/margin.js#L93

the api i just linked to is much much easier to work with and is more robust, BUT, isn't supported across all browsers. so using this means the feature won't compute properly in firefox or safari. i use it right now, but would need to gut it out once firefox or safari can support the VisBug extension.

i'd like to go all in on the typed CSSOM, but need to wait a bit it seems.

lastly: i'm not sure if the api i'm mentioning reports the proper inline-flex value, but sounds like a fun test for you!?

adhrinae commented 5 years ago

Well, looks like this is not a bug. It's an expected behavior written at the W3C Specification.

So the blockfication sets the original inline-display values to the blocked values for some elements in certain circumstances.

A parent with a grid or flex display value blockifies the box’s display type. [CSS3-GRID-LAYOUT] [CSS3-FLEXBOX]

I tried to work with computedStyleMap, but It didn't work well. I'm afraid that if we can fix this at the application level.

argyleink commented 5 years ago

interesting.

so should we close this ticket as everything is working as spec'ed? or should we "correct" this from VisBug and report what's expected/assumed vs what's specced?

adhrinae commented 5 years ago

I think we don't need to report about it. and We can "correct" this when there is a local style modification for display property only(thanks to Element.style).

so my vote is ... yeah let's close this issue and reference this to the wiki for later.