AesopInteractive / lasso

Code Repository for Editus (formerly Lasso) Commercial Plugin
https://edituswp.com
GNU General Public License v2.0
147 stars 25 forks source link

Editing Text Gets Wonky #98

Open robmcclel opened 9 years ago

robmcclel commented 9 years ago

OK, Since I'm not seeing this bug elsewhere, it may just be on my install. I'm in the latest version 0.9.6, but there is problem when editing text.

What happens is that when editing any text from a previous session (including the once upon a time... intro text on post creation) the text is not edited -- it is simply typed over -- as in the text is layered on top of each other. When you "save" and refresh the page, the old text is removed and the new is there as it's supposed to be.

Any text created in that "session" can be edited/changed with no issue. As soon as you save and come back, it experiences the same effect. I'm including a screenshot so you can see what I'm seeing.

lasso text editing error

bearded-avenger commented 9 years ago

I've seen this happen in Chrome and believe its a quirk with contenteditable with Chromium. At the mercy of Google on this one. I've seen it overlap, then when you resize the screen it goes back.

robmcclel commented 9 years ago

I was just about to add a caveat -- when I brought in another element (image, quote, etc), it all fell back into place and now I can edit anything as I please.

Weird. I'm going to test it in Firefox and explorer just to see if it behaves any differently.

I'm digging 0.9.6 BTW -- much smoother than 0.9.5. Enjoying testing it.

robmcclel commented 9 years ago

Nick and Team,

I've continued to update Editus (now .98), but the problem still persists in Chrome (using latest update Version 45.0.2454.101 m). Appears to work fine in Firefox and IE, just not Chrome.

Any ideas what's going on and when it may be fixed?

bearded-avenger commented 9 years ago

Hey Rob, Unfortunately there's really not much that we can do about this. I've done a fair amount of research and every time it points back to a quirk in Chrome. Codebase wise, I'm not sure of anything that we can do here.

We're at the mercy of Chrome until they get this fixed.

robmcclel commented 8 years ago

I've noticed that Story.AM doesn't have this issue -- even when editing in Chrome. But, my site using the Genji theme does. I'm using Genji 1.04, Editus 0.9.8, and Chrome 45.0.2454.101 m

Why is Story.AM not affected by this, but my site is? Is there something wrong with Genji?

robmcclel commented 8 years ago

OK, not sure if this is a permanent fix, but it is holding so far. The issue appears to be with webkit-backface-visibility.

I noticed that I did not have the wonky text issue on other installs of Aesop/Editus/Genji on other sites of mine (dev, thirdscribe.net, etc). It was only on Stories. When I would go to edit the text, all of the text would become darker, almost as if it was turned to bold text. When I would go to edit it, anything I changed or added was in lighter text. Then, when I saved it, there was a duplicate text overlay, slightly off center (like two text layers on top of each other).

I did some deep diving on code and errors, and one thing I kept noticing was this webkit setting. As I've never seen that setting in a body text CSS before, I started playing around with it.

When it was set to "hidden" it didn't hide the text -- it showed it. If I changed it from "hidden" to "Inherit" all of the new text overlay went away.

So, I activated the Simple CSS plugin and added the following lines:

body { -webkit-backface-visibility: inherit !important; }

And now it's all working properly in Chrome. And, being a webkit issue, this is most likely why Firefox and IE were never affected.

I don't know why this is happening -- I don't think it's a plugin conflict, but am continuing to investigate that aspect. However, this quick fix is holding.