Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Editor: ⨁ icon and Block toolbar are missing in Microsoft Edge 18 #19979

Closed
chriskmnds opened this issue Jan 31, 2020 · 2 comments · Fixed by #20110
Closed

Block Editor: ⨁ icon and Block toolbar are missing in Microsoft Edge 18 #19979

chriskmnds opened this issue Jan 31, 2020 · 2 comments · Fixed by #20110
Assignees
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@chriskmnds
Copy link
Contributor

Describe the bug
It has been reported here (props @zdenys) that Microsoft Edge 18 users are not able to see the block inserter button ⨁ when hovering over blocks, or the block toolbar when clicking on them.

We confirmed briefly that this is not a wp-calypso or WPCOM specific issue. It happens on local WP installs running Gutenberg 7.3.0 (may happen in previous versions too).

To reproduce

  1. Starting at URL: Any Post/Page with some Blocks added
  2. Hover over spots in between various Blocks
  3. Select any Block

Expected behavior

  • See the ⨁ icon appearing to add a Block in that spot
  • See the Block's toolbar above it when any Block is clicked (selected)

Screenshots

Link: https://d.pr/i/lgdogS

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Edge 18

Additional context
Refer to Automattic/wp-calypso#39072 for more reports of the incident from WPCOM users.

@chriskmnds chriskmnds added the [Type] Bug An existing feature does not function as intended label Jan 31, 2020
@happychait
Copy link

A user reported in 18438062-hc

@aduth
Copy link
Member

aduth commented Feb 7, 2020

My understanding is the issue may be caused by the introduction of window.DOMRect in a few places in code:

const rect = new window.DOMRect( clientX, clientY, 0, 16 );

const rect = new window.DOMRect(

anchor = new window.DOMRect(

Internet Explorer and Edge do not support this feature:

https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Browser_compatibility

A solution is to include a polyfill. #19871 can be used as prior art, with an equivalent upstream Core patch at Trac#49360 as reference for when this code makes its way to WordPress.

The polyfill-library we have used for Node#contains and URL does appear to have a polyfill for DOMRect as well, which is fortunate and the obvious choice:

https://github.com/Financial-Times/polyfill-library/tree/master/polyfills/DOMRect

cc @ellatrix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
4 participants