jbt / markdown-editor

Live (Github-flavored) Markdown Editor
http://jbt.github.com/markdown-editor
ISC License
2.82k stars 643 forks source link

The buttons in the title bar are broken in Microsoft Edge #80

Closed Lazerbeak12345 closed 6 years ago

Lazerbeak12345 commented 6 years ago

(In Microsoft Edge, with a 1366*768px screen, with the window maximized) The text and icons in the buttons in the title bar (excluding the text "# Markdown Editor") don't show up.

Additionally the buttons are wider than they should be, and one of them wraps across and covers content.

izhizheng commented 6 years ago
  1. download Material Icons 3.0.1
  2. copy the following files to the markdown-editor/lib dir material-design-icons-3.0.1/iconfont/material-icons.css material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.eot material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.ijmap material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.svg material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.ttf material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.woff material-design-icons-3.0.1/iconfont/MaterialIcons-Regular.woff2

for reference only

aero31aero commented 6 years ago

Hey! I'm unable to reproduce this on my end. Can you share a screenshot of what the broken bar looks like?

izhizheng commented 6 years ago
  1. Can't see the buttons

    2018-01-09_201204
  2. Press Ctrl+A

    2018-01-09_200442
aero31aero commented 6 years ago

I'm helpless on this as I cannot get a test machine with Windows/Edge here. Does switching to Material Icons 3.0.1 fix this? Also, is there any relation between using woff2 format for the icons and the breakage?

Thanks for looking into this @izhizheng

izhizheng commented 6 years ago

In my environment, I found that adding "font-feature-settings: 'liga';" to lib/material-icons.css will solve this problem, nothing else.

2018-01-10_103427 2018-01-10_101548