Skip to content

Some control buttons don't show on Safari #43

@zulienr

Description

@zulienr

Hello everybody,
I wanted to reopen the issue #41 because nothing has changed on my end. I can't, so I open a new one with more context.

All the versions can be found below :

  • sv@0.12.5
  • npm 11.10.1
  • node v25.7.0

package.json :

{
	"name": "my-app",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"prepare": "svelte-kit sync || echo ''",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^7.0.0",
		"@sveltejs/kit": "^2.50.2",
		"@sveltejs/vite-plugin-svelte": "^6.2.4",
		"svelte": "^5.51.0",
		"svelte-check": "^4.4.2",
		"typescript": "^5.9.3",
		"vite": "^7.3.1"
	},
	"dependencies": {
		"@friendofsvelte/tipex": "^0.1.1",
		"@tailwindcss/vite": "^4.2.1"
	}
}

Here are the steps to reproduce :

  • I started a blank project : npx sv create my-app using minimal template, typescript, npm as the package manager and no other dependencies
  • The CLI prompts several options that finally gives the following npx sv@0.12.5 create --template minimal --types ts --install npm my-app
  • Add both tailwind and tipex dependencies npm install @tailwindcss/vite @friendofsvelte/tipex
  • Add tailwind in the ./vite.config.tsfile
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()]
});
  • Add an ./src/app.css file containing only @import "tailwindcss";
  • Add import "../app.css"; in the script section of the ./src/routes/layout.svelte file
  • Add import "@friendofsvelte/tipex/styles/index.css"; in the script section of the ./src/routes/page.svelte file
  • Add a <Tipex /> element just below the example paragraph of the default blank project

Here's the result :

Image

Again, please note that the issue only appears in Safari (Version 26.3 (21623.2.7.11.6)) and not in Firefox for example.

Also, please note that on that exact same version of safari, the editor shown on https://tipex.pages.dev displays right without any issue.

Am I configuring or installing something wrongly ?

You can reach out to me if I can help investigating in any way. I would be pleased to give a hand. I'm on UTC+1, I may take a little bit of time to respond.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions