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

Toolbar doesn't accurately reflect active font/size in Safari #884

Closed
routman opened this issue Aug 24, 2016 · 3 comments
Closed

Toolbar doesn't accurately reflect active font/size in Safari #884

routman opened this issue Aug 24, 2016 · 3 comments

Comments

@routman
Copy link

routman commented Aug 24, 2016

Quill 1.0 has no issues in Safari upon initially loading the editor, but once you start repeatedly manipulating it via the API, it stops accurately reflecting the active font and size when you move your cursor around. There are a number of ways that I can reproduce this, but the codepen below is one simple example. This only happens in Safari in both Mac and iOS. Chrome works fine.

One strange thing is that once you reproduce the problem, then open developer tools in Safari, the problem goes away.

Steps for Reproduction

  1. Visit http://codepen.io/routman/pen/GqaVNy
  2. Move your cursor to "the grey"
  3. Then move your cursor to "Gandalf".

Expected behavior: When you move your cursor to "Gandalf", the font dropdown should say "Monospace" and the size should say "Large".

Actual behavior: The dropdown remains on "Sans Serif" and the size remains on "Normal", but changes to a blue color.

Platforms: Safari 9.1.2 in OS X 10.11.6 and Safari in iOS 9.3.4

Version: 1.0.0-rc.2

@DanielHaroldLane
Copy link
Contributor

Just for clarification, when you say move your cursor over "the grey" do you mean to hover the cursor, or to click somewhere in the text "the grey" to move the caret? If you mean the former then it's functioning normally, if you mean the latter than there's a problem.

@routman
Copy link
Author

routman commented Aug 24, 2016

When I say move the cursor, I mean to click anywhere in the text. If you click "the grey", then click "Gandalf", the problem occurs. Same thing happens when you click "the grey", then left-arrow the cursor over to "Gandalf".

@jhchen
Copy link
Member

jhchen commented Aug 26, 2016

It seems like dataset might actually be unreliable in Safari. I added a line to log dataset.value and getAttribute('data-value') which to my knowledge should always return the same thing.

Switching to only using getAttribute does indeed fix the problem which is what I'll do for Quill but if someone can reduce the bug with a simpler setup, it would be informative to know if Quill is doing something wrong with the DOM API or if a bug needs to be filed for Safari.

screenshot 2016-08-25 16 44 17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants