Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update known Safari bug #43513

Merged
merged 6 commits into from
Nov 29, 2022
Merged

docs: update known Safari bug #43513

merged 6 commits into from
Nov 29, 2022

Conversation

alantoa
Copy link
Contributor

@alantoa alantoa commented Nov 29, 2022

Why

hey, teams!
since Safari v16 is supported resolution media query, so this before docs the @media not all and (min-resolution: 0.001dpcm) media query will not work on Safari latest version.

image

so I update the docs for next/image Known Browser Bugs, hope this can help developers.

Documentation / Examples

  • Make sure the linting passes by running pnpm build && pnpm lint

docs/api-reference/next/image.md Outdated Show resolved Hide resolved
docs/api-reference/next/image.md Outdated Show resolved Hide resolved
docs/api-reference/next/image.md Outdated Show resolved Hide resolved
docs/api-reference/next/image.md Outdated Show resolved Hide resolved
docs/api-reference/next/image.md Outdated Show resolved Hide resolved
clip-path: inset(0.5px);
}
}
/* Safari v16.0+ */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we target both safari 15 and 16 with a single media query?

Copy link
Contributor Author

@alantoa alantoa Nov 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using:

@media (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {

  }
}

media query should work but would make the example less clear I think.
write this doc just to explain to developers, because in fact, developers still need to change it, such as 0.5px maybe need to change 1px.

WDYT?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 1px will be too much and make the image look smaller in Safari. We want this value to be the smallest possible change to the page while still removing the border.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it! thank you!
anyway, is a good way to fix this!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to 0.6px 👍

styfle
styfle previously approved these changes Nov 29, 2022
Copy link
Member

@styfle styfle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I pushed a change to use a smaller css media query.

@styfle styfle changed the title docs: update know Safari bug docs: update known Safari bug Nov 29, 2022
@styfle styfle linked an issue Nov 29, 2022 that may be closed by this pull request
1 task
@styfle styfle merged commit 524f992 into vercel:canary Nov 29, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Next/future/image safari border fix make all lazy loaded images bordered
3 participants