A member wrote me. After the update to iOS 10 he can not see BBC buttons and smileys in his editor. He showed a screenshot, he is right.
Is that a mobile thingy or a computer?
He says the name mentions are also not functioning any more. He uses an iPad.
From the screen shot, any javascript is completely broken.
Okay, IOs is the operating system, what version is Safari? (The browser.)
There are three things that could help (from the easiest to the most difficult):
1) take a screen shot of elkarte.net
2) try a different browser (chrome?)
3) open up
web inspector (https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html) and see if there is any error message and report it.
I will test it for myself on the weekend and answer the questions.
I can't test it, no Apple device nearby. :( I will ask other members of my board if they could help and test.
I have few ipads besides me. ;) I will take a look at it later.
Some users helped (at least a bit):
- User A is not seeing the editor buttons and smileys with iOS 10. He did see them before the iOS 10 upgrade.
- User B sees them with his iPhone 6s running iOS 10.0.1.
- User C with iPhone 5s running iOS 9 sees them. With his iPhone 6+ running iOS 10 he sees them not. He gets the error message: 516TypeError: undefined is not an object (evaluating '$editor_data['message'].css') with WebInspector.
Of the three members, which one of them is using the WYSIWYG editor? (You can check yourself in their profiles, in the "look and layout" area, looking for the option "Show WYSIWYG editor on post page by default".)
No one is.
Okay, apart from that, the only possible difference I see from the exact words you have written is: A and C use IOS 10, while B uses IOS 10.0.1.
Could it be a but somewhere in IOS fixed with the .0.1 update?
Of course unless all of them are actually using 10.0.1...
I will ask them for the exactly iOS version they use.
Are you using minified JS/css? We had some Android issues there as well.
User A uses 10.0.1 also, but is NOT seeing the buttons. :o
I use ElkArte as it is. Changed only some colors of the theme. And I don't think the three users changed anything like that on their devices.
Mine are still not upgraded, version iOS 9++. My kids are using them most of the time, so never got to update it so immediately. Hope the latest update as said by emanuele fixed them.
As a shot in the dark ... I believe we only use $editor_data["message"].css in one place .. try removing just that to see if it fixes the issue.
In the default theme /themes/default open the file GenericControls.template.php ... (if you customized this, then edit the one in your custom theme)
Find the line, it should be 151
$editor_data["', $editor_id, '"].css("code {white-space: pre;}").createPermanentDropDown();', $editor_context['rich_active'] ? '' : '
Replace it with
$editor_data["', $editor_id, '"].createPermanentDropDown();', $editor_context['rich_active'] ? '' : '
and let us know if it has any effect.
Hm, don't have exactly this line. Here's the part from my file:
// Create the tooltag rows to display the buttons in the editor
foreach ($context['bbc_toolbar'] as $i => $buttonRow)
echo implode('', $buttonRow), '||';
echo ',emoticon",';
}
else
echo ',
toolbar: "source,emoticon",';
echo '
});
$editor_data[\'', $editor_id, '\'] = $("#', $editor_id, '").data("sceditor");
$editor_container[\'', $editor_id, '\'] = $(".sceditor-container");
$editor_data[\'', $editor_id, '\'].css(\'code {white-space: pre;}\').createPermanentDropDown();
$editor_container[\'', $editor_id, '\'].width("100%").height("100%");', $editor_context['rich_active'] ? '' : '
$editor_data[\'' . $editor_id . '\'].setTextMode();', '
if (!(is_ie || is_ff || is_opera || is_safari || is_chrome))
$(".sceditor-button-source").hide();
', isset($context['post_error']['errors']['no_message']) || isset($context['post_error']['errors']['long_message']) ? '
$editor_container[\'' . $editor_id . '\'].find("textarea, iframe").addClass("border_error");' : '', '
}
$(document).ready(function(){
elk_editor();
});
// ]]></script>';
}
That might be one of 1.1.x and 1.0.x code differences. Wait for confirmation but following the advise, they could be the following line:
$editor_data[\'', $editor_id, '\'].css(\'code {white-space: pre;}\').createPermanentDropDown();
To be change to:
$editor_data[\'', $editor_id, '\'].createPermanentDropDown();
Thanks, made the edit and now my users have to test again.
Still the same result. No icons, no smileys. :(
I guess the only way to solve this is invest some 70 euro and get a 2nd hand iphone?
No need to. I can ask my users to test anytime.
Do they have Javascript enabled in their Safari settings ? Had to ask.
Yes.
Out of topic a bit - I am curious since my ipad mini 3 still says the current version of 9++ is the latest. Could it be that version 10 is only for regular size (non-mini) ipad?
Today I've received the same notice from a member of my forum, no bb buttons into editor and no smiley displayed
It was fine before updating to iOS 10
Thanks for the info, radu!
Sorry for the bump, but please don't forget about this. Thank you
I didn't forget it, but the only way I have to debug it is have a device with iOS 10 in my hands (because I really have no idea what's going on and I'd need to try any thing that comes to my mind, and do it while looking directly at the output).
Unfortunately I don't have one and they are a little more expensive than I thought. :-\
I understand that is difficult or probably impossible to find the problem without an apple device. I know they are not cheap, I don't have one either, and to be honest I prefer the Android world, but that's another story..
After a quick search I found that iPhone 5 can be updated to ios 10, my wife has one, if there is something I can do just let me know.
Sorry, if we had an iPhone to spend, we would. :-[
I will try to when Malaysia has received ios 10. Until then :-X
This is an interesting new piece of information that gave me a little hint.
Would you mind trying to register at http://www.elkarte.it/elk1.1/index.php and see if it works or not?
Registered, just waiting approval so I can test.
I forgot to send the email, but the account is now approved. :)
It is working fine with iOS 10 on the test site.
meh...
I hoped it was just the version of SCEditor, but it's not.
Can you have a look in the javascript console if you have any meaningful error that could give some hints?
From Ipad 3 mini, iOS 10.0.2. All is fine from here. BBC buttons and smileys are showing. ;)
@ahrasis on 1.0.x version or 1.1?
I would test this, but I have no idea in how to run the JavaScript console, especially on an iOS device.
Sorry but I tested it on this site when I reported earlier. Now that I have tested on 1.0.9 site, both bbc buttons and smileys are not showing. How to debug this?
Edited: Ok. I enabled web inspector in safari advanced settings but it seems that I need to enable develop using my computer as well?
This may take some times since my lappy is win 10. I will download the necesary apple software(s) later and test this further.
Stupid iOS no longer has a JavaScript console, so you have to connect the iOS device to a Mac. I tried that and here is what I got on a 1.0.9 site when replying to a post:
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 4)
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 8)
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 8)
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 8)
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 8)
[Warning] Unexpected CSS token: : (hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.css, line 8)
On this site and on the 1.1 test site I only get:
[Warning] Invalid CSS property declaration at: ; (jquery.sceditor.css, line 93)
No errors, just warnings.
On the 1.0.9 site that is generating the errors, do you have admin access where you can turn off the JS/CSS minification? If so do that and try again to see what errors you get.
ETA: the error you listed on this site has been fixed and PR made, thanks!
I disabled compressed output under server settings, and cleared the cache. I still get the exact same warnings as before. But here is where the warnings are getting generated:
index.php>Stylesheets>
hive-aef237fc8b232d8e2100b111faf0b73d2dbccd81.cssline 7698: filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)
line 9825: filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
line 9832: filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
line 9839: filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
line 9846: filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
line 9853: filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
Each of those lines correspond to the hive warning I posted before, they are in order to match the warnings. I am no developer, but is seems to be related to the DXImageTransform. I am attaching the hive file from the cache folder.
Thanks ... those warnings are caused by ie8 linear-gradient support in font-awesome and fancybox css files. Unfortunately I don't believe they are the reason that the editor is not happy. I'd really be expecting some form of JS error being thrown.
ETA: to clear those errors, edit your jquery.fancybox-buttons.css and delete the line
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
Then replace your font-awesome.min.css file with the one attached.
Thanks Spuds. I tried your suggestion and you were right, it did not fix the editor problem on iOS 10.
While googling around for more details, I found this http://apple.stackexchange.com/questions/252904/ios-10-safari-javascript-setting-disabled
I don't think it's the case here, because the reports tell of js working on other sites, but maybe is worth a check, just in case.
I checked and Javascript is enabled on Safari. Keep in mind this also happens on Chrome for iOS.
Ohh... that is an interesting piece of information.
Now I'm even more confused.
Are you serving jquery for your domain or from a CDN?
Yes, I am using Cloudflare. Auto Minify of Javascript is disabled.
I meant more: in the admin panel there is an option to use jquery CDN instead of using the one provided by Elk itself (in the themes directory), is that option enabled?
If could be useful I use these settings:
Here are my settings...
Does Chrome h ave any developer tool that can return javascript errors?
While trying to find developer tools on Chrome for iOS I found an option on the browser to display the full desktop site instead of the mobile site. When doing that the post editor works perfectly fine, it is the mobile version that is broken. So I went back to my Mac and opened my site with Safari, but emulating Safari on iOS 10. I finally got an error in the javascript console:
Could you check if in the other pages (without the editor) there is any error?
I navigated a whole bunch of other pages in iOS 10 emulation mode and none of them generated errors. The error only comes up when the editor is used. I tried the same thing on this site, and no errors are generated when the editor is opened.
Do you have custom defined smiley?
Do you have smiley in the popup?
Do you have... and custom bbcode adding a button to the editor?
In GenericControls.template.php, try changing:
$(document).ready(function(){
elk_editor();
});
to:
$(function() {
elk_editor();
});
One other question,
Do you have the full editor enabled in the quick reply area (check your user profile) ... if so do you get the same error on this page (the one with the Quick Reply at the bottom) as you do on the "Reply" page ?
I only have the default smileys.
Smileys do not show up in the editor. I am using the full editor, not quick reply.
As far as I know, no custom BBC code.
I made the code change you suggested and it did not make a difference. I will clone my site and create an admin account for you guys to mess with.
Thank you, txcas, for helping me out so much! :)
For me, don't waste time, I don't have any apple device to test the issue, that's why I'm here asking you to do the tests... :(
What is driving me nuts is that the code resembles this:
$editor_data['message'] = $("#message").data("sceditor");
$editor_container['message'] = $(".sceditor-container");
$editor_data['message'].css('code {white-space: pre;}').createPermanentDropDown();
So, the only explanation I can give is that the "data" call (on line 1 here) fails to return a proper object for some reason... which one? I have no idea.
@Spuds do you by chance have a non-minified version of the 1.0.9 editor? (Or tell me which one I can pick and attach here.)
Maybe it's something there the issue.
If txcas can try and replace the file shipped with elk with a custom non-minified one we can exclude another source.
This should be the file ....
I did not have the full editor enabled on Quick Reply. I enabled it and I do get the same error on the page.
I tried this file and it generates the following errors.
Can you disable the js and css minification?
I disabled compressed output. I got the same errors.
The error is still referring to hives, so it's still either compressing the output or using an older, cached, version of the page...
At that point a test account may be worth.
Check your PMs, I created an admin account for you.
From the tests I did at txcas site, I can say the code is broken for any browser I was able to test when minification is on. Turning off minification fixes the issue (at least here on linux, no idea on iOS 10).
Now, why that?
No idea.
What I've observed is that for some reason, an uncompressed version of sceditor is present in the hive that I got, with some notes:
// ==ClosureCompiler==
// @output_file_name jquery.sceditor.min.js
// @compilation_level SIMPLE_OPTIMIZATIONS
// ==/ClosureCompiler==
/*jshint smarttabs: true, scripturl: true, jquery: true, devel:true, eqnull:true, curly: false */
/*global Range: true, browser*/
But, AFAIK, it's been a while since we have added the unminified version of the editor, so I'm not sure where it comes from.
First thing I would suggest is to remove via ftp (or cli) all the files starting with "hive" present in the cache directory.
We provided that unminimized version of the editor for testing (named .min), so even when it was added to the hive it was not compacted but added as is.
Right. xD
/me is a bit up in the air... lol
This gets better... Minification of JS and CSS is disabled on the site. Minification of JS, CSS, and HTML is disabled on CloudFlare. The editor is still broken for Safari or Chrome on iOS 10. The editor is now broken on Chrome for Windows 10 as well, this was working before the changes. The editor is still working fine on Edge and Internet Explorer on Windows 10.
ETA: Re-enabling minification of JS and CSS on the site fixes the editor on Chrome for Windows 10. The uncompressed editor provided by Spuds made no difference.
At the moment here works on Chrome and win10, maybe it's just a matter of an hard refresh to cleanup the rather persistent chrome cache.
You are right. Please ignore the false alarm on Chrome for Windows 10.
No problem. :)
sorry if I insist on this, but are there any news?
one of my moderators told me that is happening with all browsers in ios 10: safari, chrome and also firefox.
If not all is facing this, it could be just a caching issue.
You are right to insist, but I really have no idea what is going on, neither means to investigate it.
Unless someone with an iOS10 device is able to debug the issue we are stuck...
Is the PM editor working?
my wife has an iphone5 which probably is updated to ios10. I can make some tests but how do yoou debug from mobile? On chrome for desktop we have the inspector option but in mobile what should I do?
I just asked for the PM, probably tomorrow I'll get an answer. Thanks Emanuele
do you refer to cache included into elkarte? I can try to disable it, thanks for the tip
I was planning to help with my ipad mini 3 with iOS 10 but according to my research, to enable debugging mode , you'll need an apple computer. I don't have this. So, couldn't help debugging unless I can enable it.
About the caching, I don't mean for you to disable it, but rather, clear your cache and try again. May be from both browser and ElkArte sides.
me neither, I'm afraid I cannot help :(
I did cleaned the cache in elkarte ACP when it was reported on my board, but I'll try again
I finally managed to get a 10.12 Sierra running inside a Virtual box on my windows machine. I'm not sure its all that stable but it does seem to run. I don't know if this is a mobile only issue or if it will show up on the desktop version as well, so if someone with the issue can give me a test account I'll try this vbox to see if I get the error.
I found this (http://stackoverflow.com/a/35714835) just now which I think can help debugging; but I am rushing to finish some jobs for the time being. I'll try to look into it later.
I sent you a PM ;) Thanks
I have a chance to swipe jquery.sceditor.bbcode.min.js file in 1.0.9 with the one in 1.1 Beta 3 just now and the editor surprisingly shows back all the icons and emoticons. I will try the suggested debugging technique mentioned above soon and report the errors in the current 1.0.9 file, if I managed to get the debugging mode working.
Got the credentials, and the buttons and all the smiles show up just fine on the desktop version of Sierra 10.12 using safari. So perhaps this is just limited to mobile devices.
Thats awesome, thank you for your help on this, keep us posted of what you find.
I just tried with an iphone 5 and were not visible, so I think is only related to mobile devices
I tried to install it in windows but without success. From the exe file I saw the name of the iphone, told me that I am connected but no device available from firefox when using Shift + F8.
I also discovered this https://github.com/google/ios-webkit-debug-proxy for linux. No success for now but I will retry in the next days
Listing devices on :9221
GnuTLS error: Error in the pull function.
Could not connect to lockdownd. Exiting.: Broken pipe
Unable to attach c52e7c50856e29d7dc80e1534a6ce44aa5c7a2c1 inspector
I started to debug this this morning and when it all wired up, I noticed the ipad battery is now only 10%. Meh... I'll try again after it is duly charged.
Just to be sure, I should look into the missing bbccode icons and emoticons errors, right?
Some other questions, I noticed the code is quite old (1.4.5) and there could be a bug in it as reported in samclarke github. Currently is 1.5.1 and our our beta 3 is 1.5.0. Why not upgrade it for 1.0 branch as well? In any event, we are merely using it rather than making any custom changes to it, right? (or no?)
Yes, this is how I see it on my forum
1.5 was just recently released (after more than a year) but it has a bug where it strips bbc "code" indentation (tabs/spaces), I reported this when it was in beta but it was not fixed until the pending 2.0 branch.
The 1.5 branch in our beta is "custom" as it does have the fix that I proposed for the code tag, so its good to go, I think we could include it in 1.0.10, although I should roll the 1.5.1 change back to it.
Still be nice to know what in the current branch broke with the latest ios on mobile so we could avoid it in the future.
So we do customize it a bit and that's great. Just to note, in 1.5.1 there is a "serious bug fix" which I think its fix should be included into our file as well. https://github.com/samclarke/SCEditor/issues/542
I get it working by clicking Chrome Desktop and selecting the relevant tab on the left. And I use x64 version to suit my OS.
I posted a quick reply to find fault and I get this:
Other warnings are the same:
I couldn't find anything really useful here actually. I attached here the picture of the only main error I can really confirm (which we already knew) which is:
Except for the minor css warning, others cannot be reproduced, so I don't think they are the problems.
The test is from my 1.0 site, please pm me if you want me to test on yours.
@ahrasis since apparently you have both a debugger and an iOS that doesn't show the icons (right?), would you mind testing it on elkarte.it? So that I can put up code and we can see if we can find something? I can provide you with an account, just let me know (or register yourself and I'll take care of approving the account).
What you posted confirms more or less what was reported before. Now the problem is identify the cause.
You can pm me the account for testing, I'll test it for you. And just post the code for testing in here. I'll help change it and see its outcome.
In the meantime, I think this is the only thing that should be look into as it reproduces, again and again:
I think I found something .... well I know I did but lets see if it fixes the issue. Use the attached file and let me know.
Thank you Spuds, it's working! 8) 8)
awesome sauce !
Great! So, no need further testing right?
One more question, what did you find @Spuds?
Seems like its working now so no need to test further ... but thank you for your help as it made me dig a bit deeper.
The issue is
!/OS [5-9](_\d)+ like Mac OS X/i.test(userAgent);
is being used to determine editor support or not ... thats forward (and fragile) looking instead of min level looking ... so that was changed to
/OS [0-4](_\d)+ like Mac/i.test(userAgent)
That change was added for version 1.4.7 but the ElkArte 1.0 branch is on 1.4.5 since
at the time of 1.0.9 that was the current release. Also 1.4.7 was (and is) very broken in other areas.
ElkArte 1.1 is currently using a version of 1.4.7, which is really 1.4.5 with some specific fixes (1.4.7) backported to it (including the above), specifically ones that fixed issues without creating others. If you are wondering what 1.4.6 is, well its 1.4.5 but refactored into modules (also broken).
I intend to update the current version 1.5.1 with a needed fix and use that for 1.1 RC1. The next editor release is going to be be 2.0, hopefully that one will be really stable, but I don't know if it will hit in time for 1.1 final.
no, it's ok now, tested with iphone 5, and also 4 users on my forum confirmed that is working fine now. Thanks ahrasis for your help and thanks to all that contributed in this topic
A really big "THANK YOU" to all of you testing and fixing this issue! :)
Will there be any fix I can install on my board? Or do I have to wait for newer ElkArte versions?
Oook, so the usual problem "do not test for user agent, but for functionality" thingy, right? :P
Ah, I missed that one. Thank you!
I have some noob questions with regards to the js file for the editor. In 1.0 branch we got three files: jquery.sceditor.bbcode.min.js, jquery.sceditor.elkarte.js and jquery.sceditor.min.js; and in 1.1 we got only jquery.sceditor.bbcode.min.js and jquery.sceditor.elkarte.js.
1. What are the differences between them and is jquery.sceditor.bbcode.min.js + jquery.sceditor.min.js in 1.0 branch equivalent to jquery.sceditor.bbcode.min.js in 1.1 branch?
2. Can't we use the same for both 1.0 and 1.1 branches for easier bug fixes in the future?
3. Can we like use the original js file from smclarke, but overwrite the broken part in that file with elkarte fixes, without having to fix the original file directly because I think it will be a lot easier to maintain?
If any of the above make sense, that is. :D
Thanks for the fix!
As explained by Spuds earlier, in 1.0 we ship one version, in 1.1 another.
As for the equivalence between the 2 VS 1, I guess the two in 1.0 are equivalent to the single one in 1.1.
Because for one the editor has a rather... strange version numbering where a micro increment may mean an almost complete rewrite and a major may just mean a bug fix (unless the versioning stabilized in the last period), then there is the problem that if the editor changes it may change so much that extensions like new buttons do not work any more, and another reason is that the editor relies on jQuery, in 1.0 I seem to remember we ship 1.8, in 1.1 we ship 3.0 (or something along the lines) and it's not always so straightforward what works with what when it comes to jQuery...
With that in mind, it was decided to ship a version of Elk with a certain version of the editor and stick with it to keep this side of the maintenance clean.
That's what is already done as much as possible: jquery.sceditor.elkarte.js (along with other files) is meant to extend with custom functionalities the "core editor" as much as possible. In certain cases, this is just not feasible (see the current user agent check).
It does make sense, I hope the reasoning we applied do make sense as well. ;)