Common Front‑End Issues on iOS, Android, and Web: Border‑Radius, Text Overflow, Button Focus, Coupon Hole Effect, Clipboard Compatibility, UnoCSS, and CORS Options Requests

iOS Border‑Radius Not Working

When using border-radius together with overflow:hidden on iOS, the radius may disappear because the transform operation resets it.

The issue is caused by iOS applying a transform that disables the border radius.

Fix: add the following rule to the parent element that has the transform animation:

-webkit-transform:rotate(0deg);

iOS Text Overflow Issue

On some iOS devices, single‑line ellipsis does not work even when height = line-height is set.

Cause

Setting font-size = line-height and using the following single‑line ellipsis CSS can fail due to inconsistent line‑height rendering across fonts.

.text-overflow {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

Or a simpler version:

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Solution

When height = line-height = font-size , adding padding-top: 1px restores proper ellipsis:

.demo {
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    padding-top: 1px;
}

Usage example:

<div class="text-overflow demo">I need a single‑line ellipsis text</div>

Android Button Focus Orange Border

On Android devices the button shows an orange outline after click.

button:focus {
    outline: none;
}

Coupon Hole Effect

Instead of using images, a pure‑CSS method creates transparent circular cut‑outs on both sides of a coupon, allowing background adaptation.

Clipboard Compatibility Issue

The navigator.clipboard API is not supported in older browsers.

const copyText = (text: string) => {
  return new Promise(resolve => {
    if (navigator.clipboard?.writeText) {
      return resolve(navigator.clipboard.writeText(text))
    }
    const textarea = document.createElement('textarea')
    document.body.appendChild(textarea)
    textarea.style.position = 'absolute'
    textarea.style.clip = 'rect(0 0 0 0)'
    textarea.value = text
    textarea.select()
    document.execCommand('copy', true)
    textarea.remove()
    return resolve(true)
  })
}

UnoCSS Styles Not Applied After Build

The problem is caused by webpack’s cache loader. Remove it in vue.config.js :

config.module.rule('vue').uses.delete('cache-loader')

Low‑End Devices OPTIONS Request Fails

On some low‑end phones (e.g., OPPO R11, R9) only an OPTIONS request is sent, and the real request never occurs, leading to network errors.

The difference lies in response headers: using a wildcard for Access‑Control‑Allow‑Headers and Access‑Control‑Allow‑Origin is not recognized by older browsers.

Solution: enumerate required headers on the server and return them explicitly in Access‑Control‑Allow‑Headers , and avoid using the wildcard for Access‑Control‑Allow‑Origin .

References

border‑radius issue on iOS

iOS border‑radius compatibility

Pure CSS coupon hole effect

Access‑Control‑Allow‑Origin not working

Access‑Control‑Allow‑Headers pitfalls