diff --git a/public_html/functions.js b/public_html/functions.js
index 4c14aac..118baa9 100644
--- a/public_html/functions.js
+++ b/public_html/functions.js
@@ -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', () => {
diff --git a/public_html/index.html b/public_html/index.html
index 4f8baa2..ce11e9c 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -25,8 +25,6 @@
<body>
- <div id="background_wrap"></div>
-
<div id="wrapper">
<header id="greeting" class="sidebaritem headlineshadow">
<div id="icosahedron-container"></div>
diff --git a/public_html/style.css b/public_html/style.css
index e3e7e62..8821c93 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -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;
}