l20n: Why does IE fail to render HTML tags that translation string contains? - internet-explorer-11

L20n is really helpful when it comes to implementing a localization requirement in our web application project and works perfectly fine in Chrome and Firefox and almost gets us there in Internet Explorer 11.
We are using HTML (which is supported) in the translation strings, they are formatted like this example:
"About <strong> a </strong>"
It works beautifully in Chrome and Firefox:
Translation result in Chrome
Unfortunately when I switched to Internet Explorer 11, getting this lovely sight on the same part of the page:
Translation result in IE 11
We're not doing anything weird or super special, it's pretty basic implementation.
Question is - has anyone encountered this issue while working with l20n and if so - is there anything that can be done to get Internet Explorer to render tags in translation strings?

After help from #Sampson (cheers!) and pointing out that a) It was issue on IE11/Edge Mode not Edge b) IE11 does not support one of the HTML5 elements such as Template, I dug around a little bit before I was about to announce complete defeat and digging through l20n github pages:
l20n compatibility
Using babel polyfill
Using patched webcomponents HTMLTemplateElement polyfill (link provided on page
I added babel and modified polyfill js file and after quick deploy and nervous refresh, it appeared the solution worked. Testing it as we speak so that it doesn't cause issues with the app but all looks good so far.
I know this is a workaround but our IE traffic is small enough yet I was not able to give up on these users that would like to use what I am currently working on in Irish and coincidentally would end up using IE11.

Due to the lack of support for the <template> element in Internet Explorer 11, the following fails:
// https://github.com/l20n/builds/blob/0d58a55afa6ae5aa868b8002fae5ee0e2124e35d/l20n.js#L94
var templateSupported = 'content' in document.createElement('template');
It's worth noting that the l20n.js team doesn't consider IE to be supported.

Related

Firefox - hide browser frame with Selenium

I'm trying to figure out how to hide the border (including the address bar, tabs, title bar... everything that isn't the browser viewport) of my Firefox instance instantiated by Selenium.
If there's some way to have it use a userChrome.css, that would be straightforward enough. I've tried loading a profile folder that included a userChrome.css using this answer as a guide, but it seemed to ignore the styles. I've also looked through Firefox's about:config to see if there's some preference that would hide the frame of the window, but I haven't found anything yet.
Any solution that allows me to hide all or some of these elements when creating the instance with Selenium would be helpful. I know it's silly, but that's how it goes sometimes, you know?
-edit-
I don't think the title bar needs to be hidden. But everything else should be hidden.
-another edit to clarify a few things-
I mentioned kiosk mode in the comments as an example of the sort of thing I'm going for. Kiosk mode isn't exactly what I'm looking for, though. The windows aren't meant to be fullscreen, but they should still lack the elements of a common browser window. Think of it as like an Electron app. Out of the box, Electron lacks an address bar, tabs, etc. That's basically what we have for our app, but it's with regular-old Firefox. Again, whether these elements are displayed or not doesn't typically impact the test, but we want them hidden anyway.
Finally, I a friend of mine tried achieving this goal using a userChrome.css wrapped in a Firefox profile and was able to get Selenium to use the userChrome. So perhaps I need to figure out what I'm doing wrong. The biggest difference between how he did it and how I'm doing it is I must use a remote web driver for testing. But even still, it should be able to load the userChrome.css file. I'll try to update this question with more details as I fiddle with it some more.
-edit-
I think the reason userChrome isn't working when specifying a profile is because of the version(s) of Selenium/Geckodriver/Firefox being used.
The geckodriver version I started with was 0.15. 0.17 behaved exactly the same. 0.18 didn't respect the profile I passed along to it at all and instead had Firefox open the profile selection window (not very useful, but I was able to at least select the correct profile and see the userChrome.css get applied). 0.24 is no different.
Firefox is 52.9.0. Not much I can do about that.
We're using selenium (standalone) server 3.8.1. Switching out for 3.141.59 Didn't change anything.
Unless there's a version combination that will work with Firefox 52, I think the only thing I can do is wait until there's an update.
At last I have figured it out. In order to get Selenium to use my custom profile, I needed to do the following:
FirefoxProfile profile = new FirefoxProfile(new File(path_to_profile));
FirefoxOptions options = new FirefoxOptions().setProfile(profile);
RemoteWebDriver driver = new RemoteWebDriver(options.toCapabilities());
driver.get(url_of_webpage);
Thanks to avinesh09 on Github for the info I needed to solve the problem. It's so simple, but this has to be the only way that I neglected to try to load the profile.
If fullscreen (kiosk) mode is what you ask for (as then all you see is the viewport) it is as simple as:
driver.manage().window().fullscreen();
It is the same user experience as pressing "F11" in your browser.

Bing map bug on Safari 7 (or Safari bug?)

I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.

VideoJS Flash fallback not working at all

I'm relatively new to VideoJS; I've used it successfully in all browsers EXCEPT ie < 9. I've seen a few threads started and kind of answered RE the Flash fallback for IE 8 and earlier.
My issue is that I can't get the Flash fallback working at all. I'm using the CDN version of VideoJS and assuming that I don't need to upload anything or make any other changes to my code other than what is outlined on the VideoJS demo page.
In IE 7 and 8 I get nothing. I don't get a SWF dynamically embedded; when I check my log and do some debugging via the console I can still see the tag; I am assuming that I should be seeing a dynamically generated and embedded .swf file for the fallback.
I've seen in a couple of threads that the latest release of VideoJS is broken / Flash fallback is not working. I've also tried a few of the workarounds outlined on the various boards - nothing at all is working for me.
Is anyone else having this issue / have you managed to resolve it? the v("path_to_swf") fix is not working... absolute paths are not working... preload="none" is not working...
Any help is greatly appreciated!
Thanks!
Without sample code, I have no idea if this will help, but IE will not initialise embedded Flash objects that have the style: visibility: hidden; (including any parents of that object). You can probably see the Flash object be requested by looking at the network traffic, but it won't fire any of the Video.js events until visibility is set to visible.
IE9 will use the HTML5 player, and IE7/8 will fallback to the Flash player (which is why the problem can't be observed in IE9, unless the techOrder has been changed to list flash first).

MaintainScrollPositionOnPostback Does Not Work In Firefox 4.0 [duplicate]

I am using VS 2008. I like the feature maintainscrollpositiononpostback. It works fine with IE 8. But it does not work consistently with Firefox. Sometimes, instead the line I click on goes to the bottom of the page. The field I am trying to refresh is with a div tag with overflow set to auto. Also I have several update panels with updatemode set to conditional. This means only the panel affected should be refreshed. This is also not working in the case on Firefox.
I have searched the web for possible solutions but none of them work for me.
Most of my users use Firefox so this is a problem for me.
Thanks in advance,
Bob
scrollsaver to the rescue?
http://en.hasheminezhad.com/scrollsaver
I found this little js file a few weeks ago after implementing Post/Redirect/Get on a few of my pages. It may enable you to turn off maintain on your pages if you throw it in the master. I haven't fully tested it with ff4/5 or chrome...
Edit the Browser Capabilities file, and explicitly set it so that MaintainScrollPositionOnPostback is supported on Safari Browsers.
you can use javascript for this.. chek it out..
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

Display problems being faced in firefox

I have a list of tags which when clicked, display a page which contains more info about that particular tag. In fact, it describes it in detail, in a i-frame .
The issue i am facing is that, when my firebug version 1.5.4 is enabled the details ares displayed but when i disable the Firebug, the details do not get displayed.
the coding has been done in vb.net
my browser is firefox v 3.6.8
I was looking for ideas on how i should go about fixing this issue.
One common way that "Firebug fixes buggy pages" is when developers use window.console() (or just console functions) in JavaScript development and then deploy without guarding the calls -- EG: if (window.console).