Try Edge toolbar position fix #10059
Conversation
Currently in Edge, the block-docked toolbar is pushed downwards 51px and overlaps content. This PR adds a hack to fix that. The hack is from https://browserstrangeness.github.io/css_hacks.html, and in my testing runs _only_ in Edge, and doesn't bleed into either Chrome, Firefox, Safari or IE11.
jasmussen
added
the
Browser Issues
|
Hi @jasmussen, I'm afraid I might be missing something.
Is this the "block-docked toolbar" in Edge? Can you help me see what is wrong? Everything looks fine to me, and in testing, content overlap only happens when scrolling so the toolbar sticks to the header. |
|
Thanks for the reviews! @brandonpayton sorry I should've been more clear, been going a little fast on my PRs this past week. What you're looking at is the after image. Here are more expansive before and after images. Before:
Here's after this branch is applied:
|
There was a problem hiding this comment.
It seems like something odd is going on here. I'm not able to reproduce this issue on master, and even though the comment on the margin-top says it's necessary because translate doesn't work, we had to specify zero translation so we wouldn't have excessive toolbar offset.
Here's what I'm seeing in Microsoft Edge 42.17134.1.0.
Toolbar position with master:
Toolbar position with initial fix:
Toolbar position with fix + specifying zero translation:
I wonder if there is some difference in our environments causing this inconsistency.
| margin-top: -$block-toolbar-height -$block-padding -$border-width; | ||
|
|
||
| // Disable the technique used to move the block toolbar upwards in non-edge browsers. | ||
| transform: translateY(0); |
There was a problem hiding this comment.
The need for this is puzzling because the comment on the margin-top above indicates that translate isn't working.
There was a problem hiding this comment.
That is very puzzling indeed. Perhaps you are on a newer version of Edge than my VM, and perhaps that version of Edge fixes this. I'm working from my home office today so it's a bit harder for me to test, so I would love additional eyes on how this toolbar works across versions of Edge, because right now I can't reproduce.
There was a problem hiding this comment.
That is odd. I'm also now seeing that it looks fine in master. Maybe my cache hadn't cleared when I switched to master to test it.
I'm also on 42.17134.1.0.
There was a problem hiding this comment.
Hrm. That's interesting indeed. I'm adding "In progress" label for now, and removing milestone, just so we don't end up fixing something that's fixed in the browser itself. I will be sure to check the browser version in my coworking space tomorrow, see if it's an older one.
There was a problem hiding this comment.
Iiiiiinteresting, the plot thickens. Behold my Edge version:
And still seeing the issue:
Stay tuned as I download a new vbox image with a newer version and try again.
There was a problem hiding this comment.
Yay, it's fixed in the newer version:
Since Edge auto updates, I'm ging to close this one as now obsolete. Wohoo! Thanks for the sanity checks.
Currently in Edge, the block-docked toolbar is pushed downwards 51px and overlaps content.
This PR adds a hack to fix that. The hack is from https://browserstrangeness.github.io/css_hacks.html, and in my testing runs only in Edge, and doesn't bleed into either Chrome, Firefox, Safari or IE11.
Chrome (unchanged):
Edge:
Edge scrolled:
IE11 (fixed, not sticky):
I would appreciate a sanity check on the hack, as well as testing of lots of different post layouts. The reason we combined float with translate in modern browsers is that it allows the toolbar to stay where it needs to in any layout, despite collapsing margins.
This doesn't seem to be an issue in Edge, but worth looking at both different zoom rates, and small viewports in Edge.