I'm working on a single page portfolio which is navigated using a top-mounted navigation bar using href's. I use scroll-behavior: smooth; in my head's CSS and this makes the navigating smooth and pleasant to look at when looking at it in chrome. When loading the site using Safari this behavior is lost and the navigation is instant. Is there a Safari equivalent to this CSS functionality?
Safari does not support scroll-behavior: smooth, you'll need some custom javascript to achieve the same effect. See this: Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari
Safari 15.4 adds support for CSS scroll-behavior as detailed in the 15.4 release notes.
Added support for the CSS scroll-behavior property and ScrollOptions, allowing smooth scrolling to anchors or via JavaScript.
2022 Update
Safari support for smooth-scroll is still broken and not customizable.
If you're looking for a simple way to enable it, you can take a look at the API I've been building for the past 4 years: https://github.com/CristianDavideConte/universalSmoothScroll.
It's extremly fast, easy to use and it enables smooth-scroll on basically every browser (IE is not supported) with high customization degree (easing, duration, interruptibility, etc...).
Below you'll find an example of how to use the API to quickly enable smooth-scroll on your website:
Edit:
Since from UniversalSmoothScroll 6.0.0 the Ease-Functions library has been converted to a module, this answer has been updated to make it work on stackoverflow.
The problem is that stackoverflow doesn't support modules in the javascript section of snippets, so you'll find a workaround to make it work: you can ignore it since in a normal website you wouldn't use it.
/*
* In this example we will only customize the document's scrolling,
* but the API fully support every custom scrollable container
*/
function init() {
/*
* We tell the API which element is the one that scrolls the document
* (useful whenever it's something like the body element, a custom container,
* a framework specific container, etc...)
*/
uss.setPageScroller(window);
/**
* This API function, enables the anchors'
* smooth-scrolling to the corresponding section
*/
uss.hrefSetup();
/**
* This API function, sets the easing of the pageScroller (that we set to window) to a
* medium speed(the "QUART" part) ease-in-out function that last exactly 1 second.
*/
uss.setStepLengthCalculator(EASE_IN_OUT_QUART(1000));
/**
* This API function allow us to stop the scrolling on a container.
* In this case, we don't want any more scrolling
* if the user scrolls the document with the mousewheel.
*/
window.addEventListener(
"wheel",
() => uss.stopScrolling(window)
);
}
/*
* YOU CAN IGNORE THIS PART.
* This is just part of the workaround used on stackoverflow to make modules work.
* Basically it loads the init function whenever the document is fully loaded and the module is imported.
* Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
*/
document.addEventListener("readystatechange", () => document.readyState === "complete" && init());
/* Just styling, none of this is necessary for the API */
html, body {
margin: 0;
}
nav {
display: flex;
justify-content: center;
position: fixed;
margin-top: 0;
width: 100vw;
}
nav > a {
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
height: 20vh;
width: 15vw;
background: rgba(20,20,20,0.5);
transition: all 0.3s;
}
nav > a:hover {
background: rgba(20,20,20,0.6);
}
.horizontal-container {
display:flex;
}
.page {
width: 100vw;
height: 100vh;
flex-shrink: 0;
}
#to1 {
background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
#to2 {
background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}
#to3 {
background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}
#to4 {
background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}
<html>
<head>
<!-- We include the API -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-min.js"></script>
<!-- We include the API's easing library (this is optional) -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-ease-functions-min.js" type = "module"></script>
<!--
YOU CAN IGNORE THIS PART.
This is just part of the workaround used on stackoverflow to make modules work.
It import the module and turns the import into a global variable.
Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
-->
<script type = "module">
import {EASE_IN_OUT_QUART} from "https://cdn.jsdelivr.net/npm/universalsmoothscroll#latest/universalsmoothscroll-ease-functions-min.js";
window.EASE_IN_OUT_QUART = EASE_IN_OUT_QUART;
</script>
</head>
<body>
<nav> <!-- header -->
<p>Blue</p>
<p>Red</p>
<p>Yellow</p>
<p>Green</p>
</nav>
<!-- Website pages -->
<div class="horizontal-container">
<div id="to1" class="page"></div>
<div id="to2" class="page"></div>
</div>
<div class="horizontal-container">
<div id="to3" class="page"></div>
<div id="to4" class="page"></div>
</div>
</body>
</html>
More usage examples can be found at: this answer and the official playground or my website.
According to the comment of elmcrest, it works.
<script defer src="https://unpkg.com/smoothscroll-polyfill#0.4.4/dist/smoothscroll.min.js"></script>
Using jquery there is a equivalent for scroll-behavior: smooth.
Try this:
$('html, body').animate({
scrollTop: 0
}, 1500);
Chanze zero to you desired postion.
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function (t) {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var e = $(this.hash);
e = e.length ? e : $("[name=" + this.hash.slice(1) + "]"), e.length && (t.preventDefault(), $("html, body").animate({
scrollTop: e.offset().top
}, 600, function () {
var t = $(e);
if (t.focus(), t.is(":focus")) return !1;
t.attr("tabindex", "-1"), t.focus()
}))
}
});
you can solve the problem like that:
jQuery('html, body').animate({
scrollTop: $('html').offset().top
}, 800)
Although it is stated here that safari supports scroll with smooth
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior but even example doesn't work on safari
As a way out, I found a library with a polyfills, and in those browsers where it does not work it's replaced - https://github.com/iamdustan/smoothscroll
Goal —
Smoothly animate a changing list of items.
Problem —
When an item enters the list, everything repositions smoothly. When an item leaves the list, everything snaps abruptly.
I've discovered that .drawer-move is applied when new items enter, but .drawer-move is not applied when items leave.
Docs: https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions
Template —
<transition-group class="utilities -animate" tag="section" name="drawer">
<div class="drawer" key="application-drawer">
<div class="heading">Select An Application</div>
</div>
<div class="drawer" v-if="selectCompanyVisible" key="company-drawer">
<div class="heading">Select A Company</div>
</div>
<div class="drawer" key="manage-drawer">
<div class="heading">Manage {{ user.id }}</div>
</div>
</transition-group>
CSS —
.drawer-enter-active,
.drawer-leave-active,
.drawer-move {
transition-property: opacity, transform;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transition-duration: .4s;
}
.drawer-enter,
.drawer-leave-to {
opacity: 0;
transform: translateX(3rem);
}
The -leave-active transition class must apply a position: absolute declaration, in order to take it out of the layout flow, so the siblings can move in to place around it.
https://forum.vuejs.org/t/transition-group-move-class-not-occuring-in-the-array/6381/4
This also could mean that you should declare positioning within the transition-group element. No one mentions this in the Vue team, but I don't find this applied automatically by the transition classes.
.drawer-leave-active {
position: absolute;
// optional, depends on your layout
left: 0;
width: 100%;
}
.utilities {
position: relative;
}
I have a simple codepen setup to demonstrate my problem. I have also looked through all similar threads but have been unable to resolve this problem still.
This is the HTML5 + Angular markup:
<div ng-app="test" ng-controller="testController">
<div ng-if="test === true">Hello!</div>
<button ng-click="test = !test">Toggle</button>
</div>
This is the Angular controller:
var app = angular.module('test', ['ngAnimate']);
app.controller('testController', function($scope){
$scope.test = true;
});
This is the CSS:
.ng-enter{
left: -100%;
}
.ng-enter.ng-enter-active{
left: 0%;
}
.ng-leave{
left: 0%;
}
.ng-leave.ng-leave-active{
left: 100%;
}
Here is the link to the interactive pen: http://codepen.io/anon/pen/WvoGjg
Am I missing something? My versions are the same, module is included in the init function... ARG!
It is working, you just aren't seeing anything happen because you have two issues:
You haven't included any transition declarations in your CSS style, so they happen immediately, so it's not very animated.
So add a CSS transition like this for each .ng- state:
transition:3s linear all;
You haven't set the position: absolute on the target <div>, so the left style doesn't do anything on a relatively positioned element.
<div ng-if="test === true" style="position: absolute">Hello!</div>
Updated codepen example.
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
This is the only thing in the body of the HTML:
<div id="box">
<p id="text"> Enter The Disco! </p>
</div>
and this is my CSS relating to the problem:
#box:hover{
-webkit-transform:rotate(360deg);
opacity:1;
background-image:url("Logo.jpg");
width:428px;
height:208px;
font-size:38px;
}
#text:hover{
padding:18% 0% 0% 0%;
color:red;
}
And what I want to do is make the text inside the div disappear when I hover over it how do I do this? It already spins and changes background but i just want the text to disappear after it has finished its animation.
You could use the color CSS attribute and instead of making it invisible, just make it transparent, which should have the same effect:
#text:hover {
/* other rules */
color: transparent;
}
you can use different way too. It is easy too like another solutions:
#text:hover {
display:none;
}
It's no problem to let it disappear: use display:none, opacity:0, visibility:hidden or color:transparent; but hiding it AFTER the animation? This seems to be a bit more difficult. I don't think that this is possible without javascript:
<div id="box" onmouseover="spin();">
<p id="text"> Enter The Disco! </p>
</div>
<script type="text/javascript">
var i; var rotate;
function spin() {
i = 180; rotate = setInterval("spinInterval()",3);
}
function spinInterval() {
document.getElementById('box').style.WebkitTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.MozTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.OTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.Transform = "rotate("+ i +"deg)";
i++;
if(i>360) {
document.getElementById("text").style.opacity = 0;
clearInterval(rotate);
}
}
</script>
PS: this works for all browsers, not only on Chrome :)