safari updates to style.css

src/pages/portfolio/style.css

@@ -61,6 +61,9 @@
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-top: 1px solid var(--card-border);
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  will-change: opacity;
 }
 
 .project_item:hover .content {
@@ -74,6 +77,8 @@
   margin-bottom: 0.8rem;
   text-align: left;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .project_item .content p {
@@ -83,6 +88,8 @@
   margin-bottom: 1.5rem;
   text-align: left;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .project_item .content a {
@@ -114,11 +121,14 @@
   .project_items_ho {
     gap: 1.5rem;
     padding: 0 1rem;
+    -webkit-overflow-scrolling: touch;
   }
 
   .project_item {
     aspect-ratio: 16/12;
     border-radius: 12px;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
   }
 
   .project_item .content {
@@ -137,6 +147,34 @@
     border-top: 1px solid var(--card-border);
   }
 
+  .project_item .content h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.25rem;
+    width: 100%;
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+
+  .project_item .content p {
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 100%;
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+
   .project_item .content a {
     padding: 0.75rem 1.25rem;
     font-size: 0.9rem;
@@ -145,10 +183,12 @@
     width: 100%;
     text-align: center;
     justify-content: center;
-    backdrop-filter: blur(4px);
+    -webkit-tap-highlight-color: transparent;
-    -webkit-backdrop-filter: blur(4px);
+    touch-action: manipulation;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    -webkit-appearance: none;
-    border: 1px solid var(--card-border);
+    appearance: none;
+    position: relative;
+    z-index: 1;
   }
 
   .project_item:active {
@@ -156,7 +196,24 @@
     transition: transform 0.2s ease;
   }
 
-  .project_item img {
+  /* Fix for iOS Safari scrolling and momentum */
-    filter: brightness(0.95);
+  @supports (-webkit-touch-callout: none) {
+    .project_items_ho {
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .project_item .content {
+      /* Ensure GPU acceleration */
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+
+    /* Prevent text selection on tap */
+    .project_item * {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
   }
 }