In this simple example https://jsfiddle.net/4rsje4b6/1/ why is the #test element not being shown before the alert appears?
Shouldn't the jQuery css() method be syncronous?
#test {
display: none;
}
<span id="test">Element</span>
$("#test").css("display", "inline");
alert("Showed element!");
UPDATE:
This behavior is manifesting for me on Chrome Version 52.0.2743.116 m, Windows 10.
It changes the style synchronously, and you will notice that if you read back the value on the next line and show it.
$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));
But the change of the style object triggers a repaint request message to the page renderer, and that is handled as soon as the browser becomes idle, which is after this script routine has ended.
It depends on the browser, though. In Edge it works fine, and the element is shown right away but in Chrome and Vivaldi it is not.
Another test to see how browsers handle this:
If you resize the browser window, JSFiddle will scale (each of the areas keeps the same relative size). If you resize the Vivaldi browser with the alert open, it doesn't do that. In fact if you make it small, then show the alert, then make it larger, you just get a grey area in the new space until you close the message box. In Edge, the fiddle will just resize in the background, even though the entire browser window is grayed out, so it's not just a matter of the time of processing, but more that Chrome completely freezes the page when an alert is open.
Related
I'm making a chat interface, so as people chat and the page gets filled, it needs to automatically scroll down to show the newest messages without the user having to manually scroll down. It works in Chrome, but not in Safari. Here is the particular line that is not working
document.getElementById('chatbox').scrollTop = Number.MAX_SAFE_INTEGER;
If the div ID is "chatbox", what do I need to put in the place of this line for it to work in Safari? Also, to clarify, despite it called "scrolltop" it scrolls to the bottom (which is what I want), but only in chrome.
Safari didnt like "Number.MAX_SAFE_INTEGER;". Replaced with an actual integer (ie 1000000) and it autoscrolled.
<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a>
Also:
- A setinterval refreshes the sibling's content every sec, shouldnt matter for this element, i disabled it and still wont work.
- it has a css3 transition effect on it (when hovered)
- normal chrome and chrome canary won't open these links, still, it appears at the bottom, and right click is possible, middle + left click aren't working.
- works in every other browser.
edit 1:
Long code comes, becouse i have no idea what causes this.
http://pastebin.com/bSnTYAEG
link at line: 79 - 86
edit 2: Without the transitions it still doesnt work, mouseover function keeps refreshing its content when the mouse moves / does something on the main container. (imo it shouldnt do this)
+Not working in safari too.
Changed mouseover to mouseenter, working now. I really should've read the JQuery event docs.
Recently I found very strange(in my opinion) window.scrollTo behaviour in Safari(6.0.5 (8536.30.1), MacOS 10.8.4). It seems it works asynchronously.
My task sounds like:
make some absolute positioned div to be fixed positioned (pin it)
do some page scroll
make previously modified div to be absolutely positioned back (unpin it)
So to unpin this div I have to execute unpin routine just after scroll modification is complete. And here I met the problem. Every browser I checked does it correctly except Safari.
Steps to reproduce:
Open any web page in Safari and make sure it is scrollable at least for 100px and it's initial scroll offset is 0
Open js console in dev tools
execute: window.scrollTo(0, 100); console.log(document.body.scrollTop);
The output is 0. But when I change this code to window.scrollTo(0, 100); window.setTimeout(function() {console.log(document.body.scrollTop)}, 1); the output is 100, as expected.
Here are all other browsers I've tested(where it works fine):
Chrome 27.0.1453.110 (MacOS 10.8.4)
Firefox 21.0 (MacOS 10.8.4)
Opera 12.15 b1748 (MacOS 10.8.4)
IE 8.0.7601.17514 (Win7)
Well, as soon as my code sample is not cross browser, it's easier to check this behaviour on any web page with jQuery:
var $w = $(window);
$w.scrollTop(100);
console.log($w.scrollTop());
VS
var $w = $(window);
$w.scrollTop(100);
window.setTimeout(function() {
console.log($w.scrollTop())
}, 1);
Is this behavior is ok or is it a bug? How to handle it? (Now I modified $.fn.scrollTop to return $.Deferred instead of chaining and resolve it instantly in main thread in all browsers except Safari).
I actually just tried and failed to reproduce your problem even with Safari 6.0.5 (on Lion, i.e. OS X 10.7).
You can run this jsfiddle with https://www.browserstack.com/screenshots to confirm that it works with all Safari versions (5.1, 6.0, 6.1, 7, 8).
Indeed the spec says and I quote:
When a user agent is to perform a smooth scroll of a scrolling box box to position, it must update the scroll position of box in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is completed, the scroll position of box must be position. The scroll can also be aborted, either by an algorithm or by the user.
Unless I am reading it wrong, Safari has its right to give you the old value (or indeed anything) while it is animating the scroll. Therefore your setTimeout approach may not even work fine if the browsers want to take it to the extreme.
Setting scroll top in requestAnimationFrame actually solved my issue in browsers.
JavaScript scroll functions generally work synchronously. I had a similar problem with scrollBy() where I've noticed that it was running asynchronously which caused my function to crash. The problem was that the browser had the default CSS-property scroll-behavior: smooth which caused the scroll function to automatically run with requestAnimationFrame() which runs asynchronously. Make sure that the scroll-behavior has the value unset or just overwrite it globally in your CSS like this:
* {
scroll-behavior: unset
}
I have a position:fixed Header which I want to center horizontally. So I wrote a function which is executed at the windwo.resize- and document.ready-event to change margin-left of the header. But thats not the point because everything works fine.
Sometimes after my MacBook is closed (hibernating) or I've switched to another Chrome-tab or another OSX-workspace my header isn't centered anymore. It seems like OSX is furtively resizing the window so the CSS Code changes, but it never changes back without resizing the browser window manually. But the problem occurs not every time...
Thats why I want to execute some code after my window is focused again to prevent from this ugly behavior.
Another idea: Does it maybe have to do with the difference between the document.resize- and window.resize-event? What should I use?
I'm working on a project at the moment where I've come up against a rather frustrating problem in Internet Explorer. I have a series of pop ups on a particular page that are opened with JavaScript when help links are clicked. The JavaScript for them is:
function openHelpPopUp(url) {
newwindow=window.open(url,'name','width=620,height=440');
if (window.focus) {newwindow.focus()}
return false;
}
The HTML used is:
Help
Now, the pop up works perfectly in every browser except Internet Explorer. The main priority at the moment is making it work in IE7.
What happens is that, it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible. Once you click away from the highlighted area to deselect it, it stays visible. Any area that wasn't highlighted stays invisible. When you refresh the pop up though, it sometimes becomes visible without any highlighting, it sometimes doesn't.
Also peculiar is that some text within an unordered list is visible, but when I use the same list encompass the rest of the text, it stays invisible bar the bit that was already visible.
Have you come across this or anything like it before? Have you got any tips or suggestions? I'm running out of things to try so any feedback or help on this is greatly appreciated!
By adding a z-index of 100 to every P tag for IE, I seem to have gotten it visible now. Weird. I haven't used any z-index's elsewhere and the structure of the HTML should put the P's on the top anyway.
Sounds like a browser bug.
What happens if you open the URL directly? Perhaps it's not popup related?
it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible
Sounds like it might be an IE7 variant Peekaboo bug, an IE rendering problem which is nothing to do with being opened in a pop-up. You'd have to show us the page that's being popped up to be sure though.
Whilst we're here:
if (window.focus) {newwindow.focus()}
Probably should be ‘if (newwindow.focus)’ assuming the aim is to avoid focusing a blocked ‘window.open()=null’.