My Css does work on mobile safari

HTML & CSS
1

I have a problem my css below doesn’t work on mobile safari browser. it only works on computer

.button {
                font-size: 1rem;
                position: relative;
                font-weight: bold;
                line-height: 1;
                padding: 1px;
                transform: translate(-4px, -4px);
                outline: 2px solid transparent;
                outline-offset: 5px;
                border-radius: 9999px;
                background-color: #292524;
                color: #292524;
                transition: transform 150ms ease, box-shadow 150ms ease;
                text-align: center;
                box-shadow: 0.5px 0.5px 0 0 #292524, 1px 1px 0 0 #292524, 1.5px 1.5px 0 0 #292524, 2px 2px 0 0 #292524, 2.5px 2.5px 0 0 #292524, 3px 3px 0 0 #292524, 0 0 0 2px #fafaf9, 0.5px 0.5px 0 2px #fafaf9, 1px 1px 0 2px #fafaf9,
                    1.5px 1.5px 0 2px #fafaf9, 2px 2px 0 2px #fafaf9, 2.5px 2.5px 0 2px #fafaf9, 3px 3px 0 2px #fafaf9, 3.5px 3.5px 0 2px #fafaf9, 4px 4px 0 2px #fafaf9;

                &:hover {
                    transform: translate(0, 0);
                    box-shadow: 0 0 0 2px #fafaf9;
                }

                &:active,
                &:focus-visible {
                    outline-color: #facc15;
                }

                &:focus-visible {
                    outline-style: dashed;
                }

                & > div {
                    position: relative;
                    pointer-events: none;
                    background-color: #facc15;
                    border: 2px solid rgba(255, 255, 255, 0.3);
                    border-radius: 9999px;

                    &::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        border-radius: 9999px;
                        opacity: 0.5;
                        background-image: radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%), radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
                        background-position: 0 0, 4px 4px;
                        background-size: 8px 8px;
                        mix-blend-mode: hard-light;
                        animation: dots 0.5s infinite linear;
                    }

                    & > span {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0.75rem 1.25rem;
                        gap: 0.25rem;
                        filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));

                        &:active {
                            transform: translateY(2px);
                        }
                    }
                }
            }

            @keyframes dots {
                0% {
                    background-position: 0 0, 4px 4px;
                }
                100% {
                    background-position: 8px 0, 12px 4px;
                }
            }

<button class="button">button</button>

2

What part doesn’t work? Obviously :hover won’t do much on a touch screen.

1 Like
3

It works as expected on my safari mobile but probably not as you expected.

If you touch the button it changes because of the focus but it won’t change back until focus is on something else.

You probably want to build the effect using the checkbox hack instead and then use the :checked state for the animations.

4

My experience of Safari (both desktop and mobile) is that it is harder to clear the cache. Are you using Cloudflare as CDN you must also clear this “cache”. This can lead to unpredictable behavior from old cached version.

5

The html you posted is not correct for the CSS that you posted (how I hate css nesting).

The css is expecting html like this:

<button class="button">
  <div><span>Button</span></div>
</button>

However that is invalid and I would suggest you use something like this instead.

<button class="button">
  <span><b>Button</b></span>
</button>

Also looking at the CSS you have applied an :active state to a span.

Here:

& > span {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0.75rem 1.25rem;
                        gap: 0.25rem;
                        filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));

                        &:active {
                            transform: translateY(2px);
                        }

Due to the css nesting rule that means you are looking for an :active state on a span and spans don 't have interactive states like that. It’s only interactive elements like buttons or anchors that can have an :active state (which is the moment a button is pressed or clicked only).

Therefore that rule is not working in any browser anyway and should be redefined from the button nesting. (Thats why I hate CSS nesting as you can’t easily work out what’s what until the code is formatted and indented properly and is a nightmare to debug).

e.g. This is where you would make active have an effect.

&:active span {
    transform: translateY(2px);
  }

As I won’t post invalid demos I have changed the html into valid html and changed the css accordingly. (I also added a couple of rules to stop mobile selecting the context menus on touch.)

That works the in mobile and desktop as best it can but of course touch and hover are different things and as I mentioned the :focus state can only be cancelled on mobile by clicking somewhere else. However all the effects are working as I would expect.

Note that you didn’t actually say what was not working so I may have missed your actual point :slight_smile:

6

When you open it directly on mobile your going to see that it displays like this, ignore the scaling on computer to mobile device view. open it directly on saferi mobile you will see the output

photo_6005810623386077715_y
photo_6005810623386077715_y719×1248 48.2 KB

7

Hmm not on my iphone se in Safari.

This is a screenshot from my phone a couple of seconds ago:

image
image750×1334 93.8 KB

What mobile are you testing on and what version of Safari? Very old versions will not support a lot of that css.

8

ios 15.8.4, I tried to check safari version but failed, i think now i have to make this to work on even old browser versions, is there a way to adjust it to work even on older browser versions

9

The code should work on ios 15+ looking at support for those properties.

If you are using ios 15 then the safari version will automatically be current for that version so you should be getting full support.

I think your issue is elsewhere and I doubt you need to support older ios but you could offer a basic button as a fallback if needed.

As mentioned above I think there is something else going on as that screenshot you showed me is not the same as mine.

Can you take a screenshot on your phone of this live codepen view of that button.

Here it is:

We need to find out why you are seeing something different before starting to code something different :wink:

11

photo_6005810623386077737_y
photo_6005810623386077737_y719×1248 15 KB

As mentioned above I think there is something else going on as that screenshot you showed me is not the same as mine.

its the same, look up you see the codepen owner. its yours

tho thats the preview here

12

That is weird.

Can you tell me what phone you are using and I’ll look see if there are problems with it?

As a test can you take a screenshot of this Sitepoint page (the one we are on now) on your phone also so I can see if there are problems with any elements on Sitepoint. That may give us a clue as to the problem.

I can’t think of a reason why you can’t see the nice button that is on my screen :slight_smile:

BTW I have also checked on a mac laptop using safari and that displays well and also on windows desktop it displays fine in all current browsers.

It’s a mystery but if you can answer the above questions we may get near to solving it. Meanwhile I’ll code a very simple button for you to check and see if that also spreads light on the issue.:wink:

13

Actually, I’ve tried to code a button with some fallbacks as there may be a lack of support on a couple of CSS features in ios15+

Can you try this one also on your phone:

1 Like
14

Thanks this has worked :folded_hands:

photo_6005810623386077751_y
photo_6005810623386077751_y719×1244 70.6 KB

15

Good :slight_smile:

I think the main problem is what I mentioned in my very first post and the css nesting is probably not supported in ios15.

A flattened versions should work:

e.g.

.button,
.button * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.button {
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 1rem;
  position: relative;
  font-weight: bold;
  line-height: 1;
  padding: 1px;
  transform: translate(-4px, -4px);
  -webkit-transform: translate(-4px, -4px); /* Fallback for iOS Safari <16 */
  outline: 2px solid transparent;
  outline-offset: 5px;
  border-radius: 9999px;
  background-color: #292524;
  color: #292524;
  transition: transform 150ms ease, box-shadow 150ms ease;
  text-align: center;
  overflow: visible;
  z-index: 0;

  box-shadow: 0.5px 0.5px 0 0 #292524, 1px 1px 0 0 #292524,
    1.5px 1.5px 0 0 #292524, 2px 2px 0 0 #292524, 2.5px 2.5px 0 0 #292524,
    3px 3px 0 0 #292524, 0 0 0 2px #fafaf9, 0.5px 0.5px 0 2px #fafaf9,
    1px 1px 0 2px #fafaf9, 1.5px 1.5px 0 2px #fafaf9, 2px 2px 0 2px #fafaf9,
    2.5px 2.5px 0 2px #fafaf9, 3px 3px 0 2px #fafaf9, 3.5px 3.5px 0 2px #fafaf9,
    4px 4px 0 2px #fafaf9;
}

.button:hover {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  box-shadow: 0 0 0 2px #fafaf9;
}

.button:active,
.button:focus-visible {
  outline-color: #facc15;
}

.button:focus-visible {
  outline-style: dashed;
}

.button:active b {
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
}

.button > span {
  display: block;
  position: relative;
  pointer-events: none;
  background-color: #facc15;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  overflow: hidden;
  z-index: 1;
}

.button > span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  opacity: 0.5;
  background-image: radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
  mix-blend-mode: hard-light;
  animation: dots 0.5s infinite linear;
}

.button > span > b {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  gap: 0.25rem;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));
  color: #292524; /* Explicit fallback to ensure visibility */
  z-index: 2;
}

@keyframes dots {
  0% {
    background-position: 0 0, 4px 4px;
  }
  100% {
    background-position: 8px 0, 12px 4px;
  }
}

<button class="button">
  <span><b>Button</b></span>
</button>
16

Okay

1 Like
17

Just for fun here’s a more advanced version with a nice little button flash but needs a little js.:slight_smile:

1 Like
18

okay thanks :folded_hands: