Canary vs Bug (Steem Plus Extension)

_{Gif by @deveerei}

I recently installed Steem Plus by @stoodkev on my Google Chrome Canary, which is my main browser (I was already trying it out on the regular version of Chrome), and I encountered a bug. Here's what it looks like on my laptop's screen:

Before I begin, here are some technical specs that may be needed for this:

Element	Details
Website	Steemit.com
Extension	Steem Plus
Link	Webstore
Browser	Google Chrome
Browser Version	Version 64.0.3254.0 (Official Build) canary (64-bit)
Time Reported	2 PM Wednesday, 8 November 2017 UTC+08:00
Issue	See Above Report

---

It seems these set of elements and their corresponding attributes are the cause of this problem:

Here's the view of those elements from the CSS codes:

So, I tried playing with it till it gets me a fix. The first thing I tried is turning off those elements.

display: -webkit-box;
display: -ms-flexbox;
display: flex

It only made a difference on the third element: display: flex. Turning it off does fix the issue with the stretched out @steem-plus logo, however doing so will get us another issue:

A missing Steemit logo! We can't have it that way since it will not be Steemit.com without its logo up there.

And so we tried checking other places in the html and css codes, to no avail. Turning things off here and there till I see relevant changes but there are none.

The next thing I tried doing is changing some attributes for those elements. Still, I kept tinkering with the 3 elements I mentioned earlier:

display: -webkit-box;
display: -ms-flexbox;
display: flex

The same thing - it only makes a difference if I change the values for the 3rd one: display: flex. I tried changing it to numerous things and what worked is the inherit value:

Doing this fixed the issue with the stretching of the @steem-plus logo and the possible disappearing of the Steemit logo. Take a look:

The fault lies on the codes written for .menu > li > a:

.menu > li > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }

---

Instead of display: flex, it needs to be display: inherit.

Why does it work? To be honest it's a mystery for me.

Here are some definition of those attributes over the web at w3schools:

The inherit keyword is one that specifies that a property should inherit its value from its parent element. - w3

The flex property specifies the length of the item, that is relative to the rest of the flexible items inside of the same container. The flex property is a short-hand for the 'flex-grow', 'flex-shrink', and the 'flex-basis' properties. - w3

Anyone care to explain why that works and why flex doesn't? Thanks!

---

Open Source Contribution posted via Utopian.io

---