alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ios fixes for fixed backgrounds

main
Alina Marquardt 2025-05-30 23:17:03 +02:00
parent 735cb3102d
commit 6e4e54cb2d
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public_html/functions.js
View File

@ -1,3 +1,18 @@
// fix iOS fixed backgrounds in Safari versions past 2012
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
window.addEventListener('scroll', () => {
document.querySelectorAll('.blurgreen, .listenbuy').forEach(div => {
const rect = div.getBoundingClientRect();
const scrollOffsetY = rect.top * -1;
const scrollOffsetX = rect.left * -1;
div.style.backgroundAttachment = `scroll`;
div.style.backgroundPosition = `${scrollOffsetX}px ${scrollOffsetY}px`;
});
});
}
// gif player
document.querySelectorAll('.paused-animation').forEach(el => {
el.addEventListener('click', () => {

2
public_html/index.html
View File

@ -25,8 +25,6 @@
<body>
<div id="background_wrap"></div>
<div id="wrapper">
<header id="greeting" class="sidebaritem headlineshadow">
<div id="icosahedron-container"></div>

44
public_html/style.css
View File

@ -457,10 +457,24 @@ textarea:-moz-placeholder {
body {
background-color: black;
/* background-image: url('img/bg.webp'); */
backface-visibility: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background-image: url('img/bg.webp');
background-size: 1572px 803px;
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-attachment: local;
pointer-events: none;
will-change: transform;
}
.elementshadow {
@ -480,22 +494,6 @@ a {
transition: all 0.2s ease-in-out;
}
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('img/bg.webp');
background-size: 1572px 803px;
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}
/* Alternative solution without adding a container */
#wrapper {
display: flex;
flex-wrap: wrap;
@ -507,7 +505,6 @@ a {
white-space: nowrap;
}
/* Mobile layout (default) - Elements stacked in desired order */
#greeting {
width: 100%;
order: 1;
@ -952,18 +949,17 @@ article.album a:hover {
.blurgreen {
background-color: #1e3f2d;
color: white;
background-image: url('img/bg_blur.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1572px 803px;
color: white;
border-top: 1px solid rgba(80,220,200,0.5);
border-left: 1px solid rgba(80,220,200,0.25);
border-bottom: 1px solid rgba(0,90,100,0.5);
border-right: 1px solid rgba(0,90,100,0.25);
}
/* Print styles
-------------------------------------------------------------------------------*/
@media print {}
@ -1026,16 +1022,12 @@ article.album a:hover {
padding: 0 1em;
}
#background_wrap {
background-size: 100%;
}
article.album a .listenbuy {
margin-top: 1em;
opacity: 1;
}
article.album .listenbuy, .blurgreen, #background_wrap {
article.album .listenbuy, .blurgreen, body::before {
background-size: 1179px 602px;
}