We Keep Coding

Safari offsetWidth on reload is wrong

The past few weeks I've been working on a website which is live now. It can be seen here: http://www.momkai.com/
This website works fine in all browsers I tested it in except one: Safari. When I open this website in Safari 10.1 and hover over the first paragraph, this is what I see:
This is correct. The first word of each line of text should be underlined. Hovering of the lines results in this styling:
So far everything is going well. Now I reload the page and I see this:
The underlines are way to wide! I've logged the offsetWidths and they are just completely wrong. This is the code which I use to retrieve the widths:
const parentParagraph = this.el.parentNode.parentNode;
let selfIndex;
let siblingUnderlineWidth;
this.underlineWidth = this.el.querySelector('.js-text-block-link-text-highlight').offsetWidth;
this.siblings = [].slice.call(parentParagraph.querySelectorAll('.js-text-block-link-text'));
this.siblingUnderlineWidths = [];
for (let sibling of this.siblings) {
if (sibling.isSameNode(this.underline)) {
selfIndex = this.siblings.indexOf(sibling);
} else {
siblingUnderlineWidth = sibling.querySelector('.js-text-block-link-text-highlight').offsetWidth;
console.log(siblingUnderlineWidth);
this.siblingUnderlineWidths.push(siblingUnderlineWidth);
}
}
this.siblings.splice(selfIndex, 1);
I've also added two screenshots of the console.log's to demonstrate how the values differ:
I'm experiencing this behaviour in Safari 10.1 on desktop and Safari for iOS. I've no idea what's going wrong so I hope someone can help me. Thanks in advance!
I'll be happy to provide more code if required.

I have found that when something CSS changes after I refresh, it is usually a loading order issue.
For example I was using
document.addEventListener('DOMContentLoaded', runsWhenReady);
But sometimes the offsetWidth would be wrong.
Figured out this we because the CSS file wasn't fully loaded, which changes how the offsetWidth is.
Chrome and Safari handle caching differently, which is why it would be different on refresh.
So I switched to:
window.addEventListener('load', runsWhenReady);
Which only fires after everything including CSS is loaded and it solved the issue.

Can Firefox use document.execCommand in a textarea?

With the cursor in a contenteditable div, both Chrome and Firefox can emulate typing "sometext" like this:
document.execCommand('insertText', false, 'sometext');
In Chrome, this works when you're in a textarea as well. In Firefox, I get the error "NS_ERROR_FAILURE:".
Here's a fiddle to demonstrate: http://jsfiddle.net/ukx37/. In Chrome, hit enter and you type "ENTER\n". In Firefox, you type "\n" and get an error NS_ERROR_FAILURE.
Does anybody know if there's a way to get this working in Firefox? Or, if not, is there some way I can test for support without a try-catch statement?
Also, I don't want to manually edit the textarea's value because doing so breaks the edit history.

Figured out that the error is being fired because the focused Node isn't contentEditable. If you make the textarea contentEditable it stops firing errors, but gets all buggy. Firefox will sometimes put the inserted text in the textarea, sometimes put it in the DOM as a child node of the textarea (and never display it), sometimes do nothing. No errors are fired, but it's still unusable. Same thing for making a parent contentEditable and the textarea not.
The answer I'm using for now is feature-detecting and giving up if it doesn't "just work". If somebody gets Firefox to work I'll un-accept this and accept theirs. Until then, here's the code I'm using.
var canEditInput = (function () {
try {
var t = document.createElement('textarea');
document.body.appendChild(t);
t.focus();
document.execCommand('insertText', false, 'x');
document.body.removeChild(t);
return t.value === 'x';
} catch (e) {
return false;
}
})();
Note that we can't give t display:none; because then it can't be focused. But it shouldn't matter, because the JS should finish (and remove t) before the browser starts to draw the next frame.

Safari limitation? Using multiple methods in order to show multiple custom modal dialogs

I have tried multiple methods in order to show multiple modal dialogues in order prior to finishing processing on the original screen. The modal dialogues would all be kicked off after a form is submitted. They should open in order, because the first modal has info that the second modal needs and so on. All methods I have attempted (with the simplified versions below for now) work fine in IE (and in Mozilla as well), but when I try to test them in Safari they do not work the way I want them to. Here is really the simplified/stipped down verion of what I'm really going for. I basically want to make sure the test.html page loads before the alert goes off. In IE this works the way I would expect it to for both methods below - load the page in the modalcontent div, then show the alert. In firefox, it shows the alert first then the screen changes/reloads. I've tried using the javascript methods setInterval and setTimeout, but in firefox the alert still shows up before the screen refresh. Any idea if there's something I'm missing? Am I approaching this all wrong?
<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html');
alert('alert to show up AFTER load');">CLICK ME</TD>
</TR></TABLE>
<div id="modalcontent"></div>
Ajax method:
<SCRIPT>function showNonIEModal(url)
{
var dsp;
var element = document.getElementById("modalcontent");
element.innerHTML = '<p><em>Loading ...</em></p>';
if (window.XMLHttpRequest){
dsp=new XMLHttpRequest();
}
else{
dsp=new ActiveXObject("Microsoft.XMLHTTP");
}
dsp.onreadystatechange=function(){
if (dsp.readyState==4 && dsp.status==200){
element.innerHTML=dsp.responseText;
}
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>
second method:
<SCRIPT>function showNonIEModal(url)
{
var element = document.getElementById("modalcontent");
element.innerHTML='<'+'iframe id="'+frameName+'" name="'+frameName+'" src="'+url+'"
FRAMEBORDER="0" height="500px" width= "600px"><\/iframe>';
}</SCRIPT>
Any ideas? I have spent countless hours on this issue. It seems like this is an issue with Safari. In searching for an answer I have found a lot of responses regarding using JQuery, but that is not an option for me. Any thoughts would be appreciated.
Thanks!

I'm still a little fuzzy on what exactly the order of expected results is, but I think it's:
Click "CLICK ME"
Expect modalcontent div's content to change
Show alert.
If this is correct, here's the problem (I think). You're relying on an ajax request (i.e. something non-synchronous) to complete before running the next line of code. I know IE is working for you, but IE isn't much to go by. What you want is probably something more like this:
<SCRIPT>function showNonIEModal(url, callback)
{
var dsp;
var element = document.getElementById("modalcontent");
element.innerHTML = '<p><em>Loading ...</em></p>';
if (window.XMLHttpRequest){
dsp=new XMLHttpRequest();
}
else{
dsp=new ActiveXObject("Microsoft.XMLHTTP");
}
dsp.onreadystatechange=function(){
if (dsp.readyState==4 && dsp.status==200){
element.innerHTML=dsp.responseText;
callback && callback(); //This is the part I changed
}
}
dsp.open("GET",url,true);
dsp.send();
}</SCRIPT>
Now, when you want to run it..
<TABLE><TR>
<TD ALIGN="center" bgcolor="red" onClick="showNonIEModal('test.html', function () {alert('alert to show up AFTER load')});">CLICK ME</TD>
</TR></TABLE>
<div id="modalcontent"></div>
This will force that alert to wait until the content has been received from the server and processed. Pretty common asynchronous pattern - do X, and then when you're done, run this function which will continue with Y and Z.

onmouseover fails in chrome when posting or leaving page

I have onmouseover and onmouseout attributes on pictures on page. When submitting onmouseover and onmouseout cause images to fail (returns image source not found icon)
<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')"
onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
title = "Save" />
And Javascript:
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}

I've made a page on jsfiddle to test your issue (note that you need to run the page in order to see the images with relative paths, that's a jsfiddle issue happening in all browsers).
Hover the [+] image button (it will turn into [?]) and click it. While the page is being loaded you can mouseover/out/over/out/over... as many times as you want and it will work: the image will change and no 404 will occur.
I am using Chrome 20.
This leads me to the following questions:
What's your Chrome version and can you reproduce the issue in Safari? I recall Webkit had a bug that displayed images quite randomly...
Have you posted the code exactly? Are you 100% sure that there's no missing quote, or "0" instead of "o", or some issue with letter case?
When you submit the form, does your page's (or iframe's) URL change at the same time? If so - your relative paths won't work anymore and you'll get your 404. Can you test it by setting a full path to the image's src? Maybe also log the current url?
Can some other code (onsubmit event?) interfere with your form? Can you post more code or create a jsfiddle that reproduces your issue?
Do we/I understand your problem correctly? :)
Thanks.

You can try something like this
function mouseOverForImage(imgId, imgSrcs) {
var image = new Image();
image.src = imgSrcs;
image.onload = function() {
document.getElementById(imgId).src = imgSrcs;
};
}

In place of using mouseover and mouseout events try using mouseenter and mouseleave. It usually works in these types of problem.

Print section of page script works perfectly in IE but problems in Firefox

In my battles to find a solution to printing just one area of the page that works within WordPress, I came across an excellent little script that meets my needs perfectly.. but only in IE browser. For some reason Firefox doesn't want to play ball.
The script is:
function printURL(sHref) {
if(document.getElementById && document.all && sHref) {
if(!self.oPrintElm) {
var aHeads = document.getElementsByTagName('HEAD');
if(!aHeads || !aHeads.length)
return false;
if(!self.oPrintElm)
self.oPrintElm = document.createElement('LINK');
self.oPrintElm.rel = 'alternate';
self.oPrintElm.media = 'print';
aHeads[0].appendChild(self.oPrintElm);
}
self.oPrintElm.href = sHref;
self.focus();
self.print();
return true;
}
else
return false;
}
Called by:
<a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>
This is working in IE, but not FF. I don't know much about JavaScript, so would appreciate if you could tell me if there's anything you see that's giving Firefox headaches.
By the way - I have to go a javascript route instead of using a print CSS file, as the area I want to print (a coupon) is set in a table which is obviously set in the WordPress theme's container and wrapper divs which makes it difficult to isolate it for printing.
I've also experimented with iframe printing, which I made some headway with, but IE gives me problems there (rolleyes). So this script above seems a good answer to me, except Firefox does nothing when I click 'print'. Thanks a lot.

document.all tests false in all browsers other than IE. So your code is very explicitly only running the self.print() line in IE only.