Preload CSS File Not Supported on Firefox and Safari MAC

Caroufredsel prev/next not working in firefox

Well I can't replicate the problem, it works fine on my FF, but if I had to take a guess I would say the problem is the <a> tag with no href value. The browser's default value might just be to reload or return to the top of the page (like how it does when # is used.)

I would try removing the <a> tag altogether, as you don't really need it.

the markup would become:

<div id="prev1">prev</div>
<div id="next1">next</div>

and the JS would be:

$("#bottle-carousel1").carouFredSel({
    auto: false,
    prev: "#prev1",
    next: "#next1",
    mousewheel: false,
});

then in your css just make sure you have:

#prev1,
#next1 {
   cursor: pointer;
}

so that it looks the same

Loading a font from a CDN and it's fine on Chrome Browser and Safari for iOS Simulator but not loading on iOS Safari browser?

I don't claim to fully understand this, but a workaround seems to be to put the CSS defining the font-family direct into a stylesheet in the HTML's head.

const div = document.createElement('div');
div.innerHTML = 'some text added by JS';
document.body.append(div);

@font-face {
  font-family: 'Gagalin';
  font-style: normal;
  font-weight: 400;
  src: local('Gagalin'), url('https://fonts.cdnfonts.com/s/57473/Gagalin-Regular.woff') format('woff');
}

html,
body {
  font-family: 'Gagalin', monospace;
}

jQuery slider only works in Safari, not in Chrome or Firefox

Your images are not valid JPEGs - not sure how they work in any browser, to be honest. They appear to have 8BPS headers - have you taken images in a Photoshop format and just renamed them to have a .jpg extension? You need to specifically export your images as JPEG, which Photoshop can do fine.

If you look in your browser console as the site is loading, there's a 404 and several errors reporting that the images aren't displayable. (Tested on Firefox 17 on OSX).

HTML video not playing in Safari browser

Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:

Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane

(Source)

The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.

<video id="v-control" width="100%" autoplay="autoplay" loop muted>

If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.

HTML5 video problems on Safari

This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.

They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.

You could workaround that issue by either

Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...

_{*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.}