Fix display of identicon on Connect page#8107
Merged
Conversation
The identicon was showing as a white circle on the connect page. This was a CSS error introduced when `jazzicon` was updated in #7898. The white circle shown was the white border around the identicon. This circle is an adjacent `div` in the DOM, and was rendered _underneath_ the identicon itself because it was placed first in the DOM. Unfortunately the new version of `jazzicon` is no longer explicitly positioned (it used to have `position: relative` set internally), so now it's lower in the stack order regardless of DOM position. Rather than placing the border adjacent and relying upon both elements being positioned, the border has been changed into a wrapping `div` instead. Now the stack order is more explicit.
Collaborator
Builds ready [9b98767]
Page Load Metrics (665 ± 58 ms)
|
Gudahtt
commented
Feb 26, 2020
| } | ||
|
|
||
| .icon-with-fallback__identicon-border { | ||
| position: absolute; |
Member
Author
There was a problem hiding this comment.
I left alone the icon-with-fallback styles. I think it'd be nicer to update all of our icon borders to work this way as well, but that can come in a later PR.
Member
Author
|
cc @danfinlay , this could have also been fixed by adding I think it's fine that |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The identicon was showing as a white circle on the connect page. This was a CSS error introduced when
jazziconwas updated in #7898.The white circle shown was the white border around the identicon. This circle is an adjacent
divin the DOM, and was rendered underneath the identicon itself because it was placed first in the DOM.Unfortunately the new version of
jazziconis no longer explicitly positioned (it used to haveposition: relativeset internally), so now it's lower in the stack order regardless of DOM position.Rather than placing the border adjacent and relying upon both elements being positioned, the border has been changed into a wrapping
divinstead. Now the stack order is more explicit.Screenshots:
Before:After: