I'm trying to make a flipbook for my website, but I've noticed that the back side of pages don't show up properly on Safari. I've tried all sorts of webkit fixes, including -webkit-backface-visibility, as well as some z-index fixes, yet nothing seems to work.
Here is my code and example on CodePen. On all other browsers, a "1" will appear on the left page, called .back in the code. However, on Safari, I am met with a blank page.
How do I get this working in Safari? Note: It technically works in mobile Safari, but only because I never use the back side of a page to display anything.
Related
I have been working on a web application that relies on page auto-refresh. It works as I expected in desktop Safari, which is refreshing in the background even if it is not the primary tab. So long as Safari is open, that is.
On iOS, however, I've seen inconsistent behavior. It doesn't refresh if Safari is not open, but does still refresh if the tab is in the background. Again, this is what I expected.
However, it seems like Safari occasionally sleeps the tab, then reloads it when it's visited again. I'm not that surprised to see it, but I can't figure out the logic. There doesn't appear to be a timeout time that is consistent, so I'm assuming there is some other component at play. But I have no idea what it is.
Anyone know know this work? I had assumed it was documented somewhere, but I've not been able to find it.
Thanks!
I would like to display a nice page transition when navigating between pages on a site.
I've tried using these events: beforeunload unload pagehide and also visibilitychange.
There was a webkit bug described as
visibilitychange:hidden doesn't fire during page navigations
And a workaround is listed:
using the pagehide event is the workaround
I am adding a class to the html element on these events. On Chrome and Firefox this activates my loading indicator class and the animation is displayed until the page is replaced. I get a nice loading transition between page navigation. So, in Chrome and Firefox, everything works great.
Unfortunately, I am not having any luck with Safari on iOS (iPhone or iPad) and also failing on macOS Big Sur Safari. I found a related question here: Safari change dom on before unload page however, it only discusses the beforeunload event. I am hoping that by being less specific here that a viable alternative pops up.
I have tested the css works on Safari by manually applying it and also verified my listeners are called on Safari via the javascript console. However the css change doesn't seem to be rendered. There is no transition shown on the page being unloaded before getting the new page response from the server. I've also verified it isn't related to the CSS in use by setting a simple background color without any transition or similar effects.
So far, the only way that I have been able to get Safari to render the dom change is by returning a truthy string on unload - but this prompts the user if they want to leave or not which is not my intention.
I want to avoid browser detection - however the last viable alternative I can come up with is scanning the dom for anchors, buttons, forms, etc when Safari is detected to enable the loading indicator before navigating.
Are there any other options to consider?
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.
I have a function to add an open class to a drop down menu so it stays open on mobile browsers
the function worked fine also on safari, but now I saw it doesn't work on safari like before
the problem: it opens up the drop down menu but it doesn't close anymore only if you reload the site (or switch to another one)
tested I have nothing as I have no clue what even could go wrong with that code.
in chrome, firefox, edge also in chrome on android it's working fine
the function is the following (very simple)
function togglenav(tagid) {
document.getElementById(tagid).classList.toggle('navopen');
}
any idea what could go wrong only on safari?
edit: correctet the sentence that should tell on what browsers it's working (forgott the part that stated this)
Reload without content blockers?
Not sure if this is the same case as you're experiencing, but I had almost identical JavaScript that worked in mobile Safari on my wife’s iPhone X, but not on my iPhone 6. Turns out the model was irrelevant. I had the Better ad/tracking blocker running on my iPhone which stopped the script from loading.
If this is the case, tap/hold the URL and “reload without content blockers”. Worked for me, but worth bearing in mind that mobile Safari on my wife’s phone loaded it without a hitch.
My website dynamically embeds about 20 or so tweets. While testing it using Chrome everything works perfectly, just how I would expect. However, when I test using Safari, the tweets simply do not show up. But when I resize the window, the tweets suddenly appear right where they're supposed to, with the correct size, etc. Has anyone else experienced something similar to this?