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 // gif player
document.querySelectorAll('.paused-animation').forEach(el => { document.querySelectorAll('.paused-animation').forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {

2
public_html/index.html
View File

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

44
public_html/style.css
View File

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