I've animated element.style.left in Windows Chrome
When I use requestAnimationFrame to animate the element.style.left of an absolute-positioned <div>, the animation does not appear smooth in Google Chrome Version 77.0.3865.90 (Official Build) (64-bit) on Windows 10.
The leading edge of the animated element flickers and looks awful
The leading edge of the div seems to disappear / flicker while it's moving. When it moves in the other direction, the other edge disappears / flickers.
In Firefox and Microsoft Edge and on my mobile Chrome, the animation is smooth with no flickering.
Full code example to demonstrate the problem
I've written a simple demo that bounces a div from side to side and shows the problem.
const element = document.getElementById('example')
var left = 20
var increment = 2
function animationStep(timestamp) {
if (left < 20 || left > 200) {
increment = -increment
}
left += increment
element.style.left = (left + 'px')
window.requestAnimationFrame(animationStep)
}
window.requestAnimationFrame(animationStep)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example</title>
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
#example {
background-color: #fff;
font-family: Arial;
font-size: 15px;
top: 50px;
padding: 6px;
border: 1px solid black;
position: absolute;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="example">Example</div>
<script>
// ...as below
</script>
</body>
</html>
Am I doing something wrong?
Does anyone know what is going on with Chrome on Windows 10? Is there something wrong with my code? If not, are there any good workrounds to stop the flickering? The only one I can think of is to place my div inside a bigger div with an invisible background. For various reasons, I don't want to use CSS animations.
Related
I have created an iframe (lets call it a div to simplify things), that has a transform: scale property that I'm calling with javascript.This scales the div, but however, it also shifts the div upwards. I would like the top to stay in the same place.
Background info (from answers suggestions): I want to create something that looks like google docs. I have created an iframe that will transform when an input box value is change (like google docs). I want the top to remain in the same place (like google docs).
1) I have tried in javascript to implement document.getElementById("textareathingy").style.transform = "translateY(1000px)"; document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")"; I tried to put the translate both before and after the scale, but both methods do not work, and the div continues to go upwards when I put translate first, and the div does not zoom in when I put scale first.
2) I have tried to put position: absolute; to counteract it going up, but that doesn't help either, and it gets rid of my scrolling feature on the div. So in answers please don't use position: absolute.
3) I have tried using the zoom feature, but that doesn't zoom in on the contents of the div, so that also doesn't work.
For some reason, there is no error messages in any of my attempts.
Here is also my css for the div:
#textareathingy{
width: 820px;
margin: 20px auto;
height: 1000px;
border: none;
display: block;
padding: 75px;
background-color: white;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
Here are two pictures from google docs that represents what I want.
Notice how they both have the same "top" position, but it is zoomed in.
Use the transform-origin CSS property to set the point in the element that the transform should originate from. Set this to top so that the scale extends downward from the top point.
img { border:1px solid black;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: top;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS8AAACmCAMAAAC8yPlOAAAAt1BMVEX////e3+AFM2EAMF8AHlYAJ1y6w87r7vIADE8AL18dPmjc3d4ALF0AIlgAKlwAKFvl5eUAIFcAG1UAF1MAFFLp6uoAEVH5+fnw8fHFzNZyg5tQY4E2U3cANmTR1dm+xtHd4ujb4OauuMWRn7HKz9QoSG+ZpLJidpGGlamxu8hugZl6jKJWbInQ2OC8wcjJztNGXHwhRGwAAE47WX2XorCjrbkzTHBVaIUPPmteb4mNl6evtb+Bj6FtBcyeAAAVp0lEQVR4nO1da3uquhKukkhREghY8QKKUkRFLS6L1bb//3edXECtolWrtvs8vOfDWRu5TCYzk7klfXjIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkSNHjhw5cuTIkePakN3uc6nTaDy3210KdxI2ZIa6ZVm/TdufQr077AfzsgKBQQAwGAAghEAENawqUrHoOOVyeTbzF7Y9j1pv43EQjJrh5+Dd68cN+bfpvyfc3miOTAIxRITyyRSoVk2AlKIkFRWV/VCt1WrVbdB7Ur4ahr/yJr89jvugFNWoFBFSLGpNr9eYuPUt1QuhvXO7RbXT7U4m7UapF3uDsDlavfkIIIRMMxj+v8tZ3SsDjPCiOWxgLeSXLKvuThgz+pQbC8VpRfO5bduLBFQZoxbFG9PHcPAaD0uNidzoBwsqhwSPS//Hdk4OIZLUWUyHKDexGobBm73ERtU0AKECAzWN2i1VoZCUbagCWMUaRIgAw5QWq2Bus7uBNnr+7XHdBm5Q06gZn78HPjINXCxijFVqri6CpPBFgf1LM/3hb4/t2rAmpYBgMT6MlZO5IlBkrOH/yIYCZvH/iyXrNvrhW9k0E25lsERRqaAxRQPMsWALZe2xRlUUQcx0kf5v6c8kyV86CqFLJlfexOfYcAxVl6PY/e3B/gSW3OmPZpQJSFN3BYPxiPkMpqE5/ry1GjUHXtyjjutk0nXl+v7LXGDKyVv54jAIWgvFNJC24ZqEkfnWufMgrwYvWlJOYWmHTVijDISK44+bdKWbuLJ8mh9fLxp7rKjLjd5gXoQArj+jGrN+Brf/PsLqtrowcULArDrz0aDfmbgXuAA28Q784ja8wKkSTU0UE4T/QVNWlFJOUYEyiotWM+50T2MT9cfqdXkH9QCt6iKuzHxILoWRisRHIWq6VxzKXTBnsy0hpMzDuOMenXBmkDqlXn8QjoK3lu2Xl46wb5B7WlURLanU00JQdcozuzVuDnqdyd5LZa9IxMqrkeA/FiwNEWWXsz8mAcqiTuyFQeQ7iC14dMUjPM5WqbMqHXEcmFPBllNIhbZqLluh13G3X9yzq0Itca31X/Ji3RkbMfqqO1a9W4q9UTRzVMS8hV2f4GxIVAgBKs4HvY1FfH4jmjD9YN64+7gvxERjegHH6wsydQCiMjKpFH3v0nMB+xoKUQdNouxhodLe08xEmkoUlhJh7o5MyO9Rzei/wbGeyaUrWl+I/1EfLFOWhH5pkBorFhgCA2jScjbzRdaLRtpvDCsaas8Uf/XWihZUOgFg2qt+XYE1UHOawmrVB1iYfrX6X+BY32C0gtHmSnGHVZRHGnXoCXXEZr7dCprvr/04/phOX9rtCkNBQN/gqYmiJ10vFNjPL9P4NRzbZQUhvO0La8Dvc82se07CMWD/dY41TUZodbB1yRFjSgy1qc6ioPn5Gk9fntvbPCkcgd5H5a0bxP3P0zhsKSZdN1OmKUgZcIfV6mPCLypm6y+vlVaEuHT1ti/GXOKWb0HY/5i2T+LPHqZEfclgI5W89sdgPKNRl/AlJFgNXfHVssEvqbXoz3JM9jU+yztKEPFV/vnpXCZtoULQ9MBP9K2V57jpIzVRS5S4X70ZEFppjP8mxyYSI1mV3J3rcpVx0b+UVwxPS+QdYzZl2kfLTDiG06Wx5JuKuPAXtbL0yKZTs/fd1B7TSBg8na2GG368oeY3j+r6dAWF90VFyhYBemmeaKX557RSLIxknPVbABnN89Vnv/dSKVzANv0Ttb5/Rn8ZqQnHFDNxWBs2UAULA/ee7PgOY86u6mfmj1aZzTL1I+gKicoRtfzTl8o54kYXyOIp9+rtTwyT9dicCxlrtGqcY7j6dzgm20yCJLN34PeusXGUWB4MUlffsYPP14/EqfiOEVNitE/jbOW9nKQqFDATqf1JS2glBuHfyI+5DptBBR5OcJbMvbS9JFG+EVT0o+Az7j2L0R5yN54VMjyJX4xjfT/VSsMXM/hsA/59TRn9ATvmqowYvHSP3DP0ayYgUM0KAVWNRkOEqEvq7q+CJqszUnef+vsV/Snl3wz1TzZ6+tNgmbqwYCk41llwGZNw1f716ojP/Yg364El+w6mmC23wQJvXwEGDQCzAkoWTrLomseTUMNK0SlTFo5Hn++vPl6xgIlGTIeFcI2x4mxeSsol/v2hL4yCQlCr95ss8wgjwxm3/GURq84sGodx47ChkN3nntecFwmVKYjVo+U1KWEhhEpRpfdrxeXMjlrjYBS+9+OPIWXhdkwlOKiLpXoNxbCFHes5Yq0sqohEv9aBYSXmVeW6Jgn9Mv6Nvn3QnQy95srHNYOwDIZyJFP4RQY5BzVR7KYBKVGWfvRG1fiTspCr8edu9Y7aMWFah3NTS6iFJgziE7PkV0XD2B8VRe3U1IAlT4Zx+Gb7M0fSiMG7A3i69ST+JTwUHISI5diyJFZKE4iTpgNSdqoIOPOw15DvyrUOyBzE49mpFKsuy647aQx580nQspeqWauyPiYAEGT+m5qxXJwK1VjE4jOdwDBSprJ8o2E69ltAbch9pC2TX0qteZ23sxLtc6MUe0U1ClaRPXO0TYsKxqeqMecNQl5i5xtN30QbQWRGUkPArBF75MWHCg9XQiODX2h29VpzBPrs/yxWcUtaoAbNYDxf+GVHwQgkeny8LoC0dbVN7o18bavam3AOQ2Ro5SjsTW4lbJM9fuHaofLqDzAiwaGfLN5UR1lI9fiTsnC5zQOJV57WQqhVV5uFUW54K+XRBGiHyRJbscBi1H++QTzQ5fzaVMIk8+07gXYbKU5f1D3kn3prqboZujYLR8E4sv0lSdfxx50GqG4jbo55Qwb8wjYutc4onlyXaXXGL6nM+nN9JvLF0ndPWFVqwQX+nay3JaCeTNJY9LpSwFEyWMuS41mSqphnPcMaMrxg4WhfW2QkjAwnGnSuqJ1MrDD/10BVH8MT3jz795jgX/fUr0wAch9YA2wrQXSE1d22wI7p7kQ11qkXHXiKQ570Bm9qzdgqpkgqBOZ80LnSOsDKs5ByaaggY37y+M+FjAxWtLYNlMDMFJNv0A2QCU8wAjLV0cjZXkMVjSB/cCRuORmMX9qDvDIhOpTPuQY0wt4+GTUTXJhpkDsnD7ne7TVnEKBNAQoaUqv3U9Xk5f8+QrXRTbNLMzT4/qbrQ570A6e6bmaTaBj7s56pAU82QeDfOIAdo4MOxc0h94KZsZYzDfzAXxrx8FE1+tejLhvvaHHrT+zC6vfj3rDU6DKBojxT2B4UBjC/VJUGnF1GdPuEUozQzb+xg7CGECGE9aHNVoOS/CDHtiicY+eyAU8emU6DmwvXA4u7qvfO8g2ra0dMwRoAxblXGkaiCixdRIxP5VMy7tLVIZv3+c42OkT9El2qCOHWnCdv1dkF7xsybQT3GYYsgVvs5DhuiOQF2ubXwjdRknAswgsyMHMqXugGwXUmFtf/0iT04TeTEGylE6T5g9trKUlW2zjbIbCKiWt/F7Su7VD0bBOhf99NQs/c6GSVjVUujassds+OQ4/BhawudBmx56OJjgZ+56KHCQbL5vfGxPXXOkmSmNXqlSnDqucKWJeaLy27BeAG8NDseqLsRoZq2MPTXjgwkjAy2bVJMaRqis+1YCy1iu7hS3AMgXI1hyI2VOCfngOeOELElLXLXMesZ/7M+RsSyq+TYmzZHfbifjzs/mDEDcNwL396G1ZgqCjeuiB3hzFz5Q9vrhgIIw9K6YawMf3v6pn09CjXyQkG4DVSTVagQMTEdnip++GaxnW2IVg2gr67/s/JwNYS8gwlGhwwSm5EiKZKBCyj8KMhP/ThqbKyQUz5pbbcb26ya2jL65M0c+ldFH1Ztevki+plTMapJlle2YSbiqWkwOoizlYztxS2SBXw3vcqZLlk9cwF+5OlJjA4loCOJbTfmYPQKVnYPajo9YKndmHNVJKabctDaK+aJCF82CbLjf4oWgKDPyctz/t0i8qNU1TNg4ZzsgBJLxYr37OqdUIdKl9QcLNR+P1N3+JNA+lrSuXEU1A0xFtcEvIkYB/NE1vyJH736b08RX46aPQo+VZZPRQI92tctiSIomb/Y+oNRi0JiMybUjt/7Ct0BV/PM2CqReGjIAXBFut1j/vhammIcEd9/HbZH8CzQ0FFKkr2g6tqmV2rSWpMIfZrm7fO8Aaa6SjZfUGic3UyRJfEuF8xMdXEJ7BaXLhUFPUrG/Jemkl7ovFdwwxzDuB5ERp9QpkzZ8bM4vOY00Psj6+NWnrbw7zjQ/PPZJiH4HkPZMBXEx2yeBOiBKLpDnmV1yLkJuMbYWZ1V3yekiDBr4cF3j3IhSJg7FJwf7+tTa+seBCL7fMYNgTgpw6+Rwyxxlo2mzNVjfeb7vRCkyvGN+Gqq50dDMLE4y2R/Vh9wLro8OIlswlQ73MzAc9bj9sG+KGDbwE1mdkxkyHsP2/I25pXPeZGFhwtsNSLUlE5uebOsaT2i5uUItwVzE6NC1BlTcJTod0uPKU06VNB0VnBVBeBH9ZUPJRMbB98IU9/eh5+fAwrKX36lM9npplZo8x6A8/6/Jyuj0U25QPkfP2lzhoR1MV6xj5WCqvRL0cfBX2bon/nCIysGd/2GhyFtcRiZXJZGn1Nnj4NNIOw6MP/fE7Jg/xUlWP6z1IU5xnUJrUBxH1gqw4auF9+ocotFdct8zpGEPGNnsRPLIb+wewbPssAzP/9LJVbShcm5jhKy3bCmhZRJZX6hxr17nGzIppgWexSRMeSL6zuCs76vkeNAOH5yTJEtYW3dvJcJu6G4Ize1guWZ3/2OqU4VAxsvCUUNZkJOSuHZP2w2yDQhL1psF2axlSQ8QpU1YBjL45DvwoluEyuh4w8eET+mXyZZ32f5XNESsgdOQZEhjMSG6lHbO0Yi+8OHldbj3RsgpfJIsAmSL1qDvA4LCUpkdvUjdZGgryRIRmtNNioD7CqoI8NedoRh+F8fZTxJoayOoEEIASaHTZkNn+Y7/DU38GOszEAarktNJJJIbhZh8oenoGw9hO+X07QECLlSwZfnkNJnW408rAHY7GNw2cGkKyctpUEmgz8Go3fAaMHBzo3Dqaiul8fGlZxJOaWzTO8X1eEh4S5CTWWG+XkfZgS3pmwACkzQR6LEMnBcgjzv870J7gB+yqy8nDk8/0LQGyI9RW0J0B9QF71dAal5d75LzdCPUgKAKx+CLn0V8oK2TOgEYafnLxXSh5e7f6cgvv3B3/Nhss7H3ebY7tMTX3hlxKS4WJFuMiZ2ebxJbwTNAXy5a5bZWEJ50gfZdToZLpOcmV9ZquockghS+SC4gXfm60ho+qPvIabXGT2AXNzqs/UcsZTE0D47ik9YvkLFdwLovuTSbUmJGihZimUB8XuZ06eeWgBZ/mJs4sXpXRzh4IhgMVo0OvWeZoacWdiirLfGGl8u6z+zgpyQad0J4gJZV6jWANf4JcsfgoZqkL8QnzEgLEE/vkJ8iXcPmhE1ZCpRuzoSjLlBsqsZi5/MeLOIjdg+N5tXUwn+O5Tqo7ZmbsxdiopeQdTNjyiOjuelUc2MBD+0ofNI0NuASqrbP9lYgBub1/AfT0wDrYqo9QlzbyjDyFfrZiJwgfyYKz2eu7yKGBNeiO7aKRnZggYIpTVsx+Rq1z+Cm2yXdO7ExaUTix8VZRd0u8AQR6fzoxcqCWX+sy2nV2w3UDu9mg4YZA0BX6cXw818sH5xVbSK1atTwLjlyp86X/ZA24k/Gobe+LP6x2SSXhN6Wil5xRMhmFL4aeWCX0sxNneu1wFG/lau/8T//EeYCMlYjbb2cMoJcepNHblSw4ewZbxIddocLZktnIIe//xiDKFpwHgcyrwSjqBVvlLc9pNkZ42kD0EDyqcvA/Ca4xWgvon/LITFWWXLc5GH6UL9gfKrqAMkL8O0dZFTxcdGt31kcbU2aagpc2EO8sT+TgFgunj3BGota7UP1/iaQtOUFHLXF58KKJLFsltFmwbSncBHbD2LviVOWIZaCK6DLKOJVY0YhZb4fB6eQKZLbU8pNabWlbKfQgMkQJgphesK7fyuHwXsDRScryMF2RwLITC2yn4+zspoTYfDC85Q/YYWNoCPYsFEGcoeRFz/5n615SCx3vvObdYtkkS/iHKKDN2CV5x8qaEq94aigSNz1v0aLNsdBLjv5P9s3nHmliuuTre3V0V2WgkMiSfyNjtYbGWapIbGzFvZ9FaI1oObrPjZ2KyPA33wPRIM3ZitCYBnJeFCquYklvu0cpGTNiGTZHjWuCdrmvZxkAcpdJm5H0pFN5ME9iOYChMasXWzO2NWK6NSJIKZu09Er7/EUB8h2tyAFt7ho3tZqGGg83PJFOtnd+BcyF6jCIifJxKi0DVc/l1azICasIuYb3umF7dgJUyJGHBCu05gtgTFtzqvAGcHNSjT3m2/E7Sv+SljKRyNoAQgcUqHI3LJoRKWoJni6N0rABzM8jM00uXyELIan2ztyBoSQYEtigPFSqs3KH8vMHlNJTYGpSeoae3Px1+YARCoPxZSS6umHhlZV/vAI8XF8MnQclzsyi6BgFqfaQV7hbzvU4+pOXHGLPPkc/064Xp62gVrd6nhfTKiM/xveZvF2Wec0rPkNQr0/cgCN/jdtpEofNuGe1+qbk676IC4bqJ4+sJVPqK0SPx4vhvYMLP1SWDp0zy9AInTzm3X/xHFAFxjnQ7o0FHn/o8FDN/mg+5HD3BsKTWvkvejPeGwfuVRh8SE1bExX5hhyS9EorUYjUreX4veII8J4O8Jk9uSce7c66PIW8PldDstbKliE/td4cLl1T9HVufYsBrgRJZxJvWL3bA8kC0Fyr3Zhf1/TBPaEmQvHnT53al0n75+LSTA+oVLatD2vqC+k/w9VUZ3+olZ3Ij0HqfMuoYeQtDkKc5v3D+nGwTEdWrkKhOuexoJE3yo1nbqj9RZBxDWNnFvok5gu+e5gfEU9StjqKtyWN/b9KBKXmSMb53FkDAQ+sU0vZf5sDk8zwm3AR6e2SoGdRJsHjfv8nGVOmJ9zZSkjS4k0WSoNrMWjV/AXpjvN5fvM4HosSn1pkM3vgvw1I+sU9tKYH+MvBhWiOQFBXC2eCPcItBn4ZlmJyaxv+ylBbFWz4GH4hO+XYTZj0VsrRM11/6o8gBBoDSfPQ6vfwY/JtA16deMGenwjqLVTN+ziSvUni6Ab/0TH5xmigR7Uryjz8HQV7hCHmVgn4bEUv08Z6jvSluqY8brlHP6SkxZOe6A7+PlGZm7w8f73wz1jGvc9vNusCluh2+EMP9smNHYP8G1o574qwKPu45mZd4qvuMyH5h6rE+rcOA32bK5ciOhp5OR3ZE9NvDypHjivgf2eUiCDNUxugAAAAASUVORK5CYII=">
</body>
</html>
To trigger this from JavaScript, just access the transformOrigin property as you would any other:
let img = document.querySelector("img");
img.style.transformOrigin = "top"; // Set the origin
img.addEventListener("mouseover", function(){
this.classList.add("scale");
});
img.addEventListener("mouseover", function(){
this.classList.remove("scale");
});
.scale {
transform:scale(1.5,1.5);
}
img { border:1px solid black; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: center;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
I am trying to draw an image using JavaScript and svg.js library. The image always comes out with an offset of about 8 pixels from the top and 8 pixels from the left edge of the browser window. I would like the image to start at point (0,0) of the browser window. In other words, it should be aligned at the extreme top left of the browser window and not at some offset. I have tried many different settings but nothing I do seems to help eliminate this offset. I am listing below the latest version of the code I am using. Can somebody please help? Also, is it possible to achieve this effect without using css?
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<style>
body {
width: 100%;
padding: 0px;
}
</style>
</head>
<body>
<div id="drawCurve"></div>
<script id="drawCurve-script">
var s = SVG('drawCurve').size(500,500).viewbox(0,0,500,500);
var p=s.path().attr({
id: 'path0',
padding: '0px',
fill: 'white',
d: 'M0 0 C200 120 300 120 300 100'
});
p.stroke({
color: 'black',
width: 1,
padding: '0px'
});
</script>
</body>
Add margin:0 to your body tag:
body {
width: 100%;
padding: 0px;
margin: 0;
}
There are a lot of posts on this site that I have read but nothing is working for me and I'm not sure why.
I'm trying to make a menu that "sticks" to the top of the page as you scroll past it and vice versa (stops sticking when you scroll back up)
Javascript
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100))
document.addEventListener("scroll",Scroll,false);
document.addEventListener("gesturechange",Scroll,false);
function Scroll() {
var y = $(this).scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
CSS
#FloatingMenu.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
background-color: black;
color: red;
}
#FloatingMenu {
background-color: red;
color: black;
width: 100%;
text-align: center;
}
I've tried doing repainting, i've tried stopping the "inertia" scrolling (which I can't get to stop on Chrome on iOS) Either way, everything I've tried has the same results. Works perfectly in a PC or on a Android, but on an iPhone, the menu will not repaint and be "stuck" at the top until the scrolling stops AND the finger is removed from the screen.
Is there a fix for this? Everything I'm reading suggests that there is but notn a single solution has changed anything for me.
The strange thing is, if your scrolling back up (the menu is already stuck at the top) and you scroll past it, it auto un-sticks (even while scrolling) and works fine.
The only time its a problem is when its "repainting" the "fixed" menu.
I hope there is a solution. Everything suggests that after iOS 8 it was fixed (and i'm testing on 10+) but It wont show the menu while scrolling until you stop and let go. Tested on an iPhone 6 and and iPad Air 2. safari and chrome, same results across the board.
I think I solved this question.
It's pretty funny.
Just add to style transform
transform: scaleX(1);
Or
transform: translateX(0);
And it's all
.fixedSidebar{
position: fixed;
right:0;
border:1px solid gray;
height:100vh;
width:17%;
max-width:70px;
transform: scaleX(1);
}
The problem is with position:fixed. This seems to have known issues with safari specifically on mobile devices. After doing some searches for hours, I believe that I may have been able to fix this issue.
The solution I used is to use position:-webkit-sticky for iOS safari and use position:sticky for desktop browsers. More documentation on this property can be found here :
http://caniuse.com/#feat=css-sticky
Can you please try the following code:
CSS:
#FloatingMenu.fixed {
top: 0;
left: 0;
z-index: 1;
width: 100%;
background-color: black;
color: white;
}
#FloatingMenu {
position: -webkit-sticky;
position: sticky;
background-color: lightgray;
color: black;
width: 100%;
height: 60px;
text-align: center;
padding-top: 18px;
font-weight: 800;
}
JS :
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100));
window.addEventListener('scroll',Scroll,false);
function Scroll() {
var y = $(this).scrollTop();
if (y > top) {
$('#FloatingMenu').addClass('fixed');
} else if (y<=top) {
$('#FloatingMenu').removeClass('fixed');
}
}
});
Please note that I have removed the fixed property completely and applied the sticky property to the #FloatingMenu selector itself. Seems to work for me on my iOS simulator safari, and iPhone 6 Safari and on Chrome & Safari in my desktop.
A simple working example of this fix can be found here : Link
Hope this helps. Cheers.
You shouldn't add any event listener for scrolling because it can produce several errors - maybe crashing your browser. This is the first thing you need to change:
JS:
$(document).ready(function(){
var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100));
function Scroll() {
var y = $(this).scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
setInterval(function() {
Scroll();
}, 120);
});
The second thing you need to fix is your "function Scroll". It's right: just a function maded to be called by a DOM element. But what if your event isn't triggered by a DOM element? Maybe that's your problem!
So you can even try adding Event Listener for scrolling just fixing that, but I don't recommend.
JS
function Scroll() {
var y = $('body').scrollTop();
if (y >= top) {
$('#FloatingMenu').addClass('fixed');
} else {
$('#FloatingMenu').removeClass('fixed');
}
PAY ATENTION:
If the first scrollable parent of #FloatingMenu isn't the <body>, you should fix that $('body').
This doesn't happen in Chrome or Safari. It's a little bit noticeable in IE8, but very slight (and gray). The outline I see on both my monitors is greenish. I don't know if it's an issue with my graphics card or with Firefox's rendering of fonts at different opacities.
It happens whether or not the style is set CSS statically, not using the jQuery fadeTo() effect.
The following test page shows the problem. Move your mouse from top left to bottom right to change the opacity. Eventually you get to an opacity of 1.0, at which point everything is fine. Any ideas why this might be?
<!DOCTYPE html>
<html>
<head>
<title>
Text Opacity Test
</title>
<style type="text/css">
body {
background-color: #ddd;
}
div#textDiv {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 20px;
font-size: 400%;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function() {
$(document).bind('mousemove',function(e){
var hOpacity = (e.pageX / Math.round($('#textDiv').width())/2);
var vOpacity = (e.pageY / Math.round($('#textDiv').height())/2);
var opacity = vOpacity + hOpacity;
opacity = (opacity > 1) ? 1.0 : (opacity < 0) ? 0 : opacity;
$("#textDiv").text('Opacity: ' + opacity.toFixed(2));
$('#textDiv').fadeTo(0, opacity);
});
});
</script>
</head>
<body>
<div id="textDiv"></div>
</body>
</html>
Indeed, there is a problem with text and opacity in FF. You just need to set a background color to the element that you are changing the opacity.
If you can't (eg: the text is on various background) well... You are screwed :D
Dunno if it's working, but you can set background-color: rgba(0,0,0,0), maybe you are in luck.
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;