Кнопка исчезает только в Safari, когда включена прокрутка списка ⇐ CSS

[Anonymous]

У меня есть кнопка, которая отлично работает во всех браузерах, кроме Safari. Она расположена в самом нижнем левом углу, и когда я перехожу на страницу моего сайта с оглавлением (слева), кнопка визуально исчезает, но все еще работает. Кнопка практически просто меняет цвет части текста на моем сайте. .
как вы можете видеть, значок не отображается в Safari, мое оглавление длинное и позволяет прокручивать левую часть страницы. Я использую шаблон веб-сайта со страниц github и jekyll. Почему это происходит только в Safari.
вот часть моего кода:
HTML:

Код: Выделить всё

    [/i]

CSS:

Код: Выделить всё

.bottom-left-btn {
bottom: 5px;
left: 5px;
background-color: transparent;
color: var(--clr-text);
font-size: 16px;
border: none;
cursor: pointer;
z-index: 10000;
display: block;
position: fixed;
}

.toc {
padding-left: 10%;
z-index: 1; /* Ensure TOC has a lower z-index */
position: relative; /* Ensure positioning context */
ul {
margin-bottom: 0; /* Remove bottom margin from nested sublists */
}
}

JS:

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function () {
const starButtons = document.querySelectorAll('button.star-button');

// Initialize jscolor picker
let picker = null;

jscolor.presets.default = {
width: 200,
position: 'right',
backgroundColor: '#333',
controlBorderColor: '#FFF',
shadow: true,
borderRadius: 6,
borderWidth: 1,
borderColor: '#444',
previewElement: null,
palette: [
'#7092be', '#4040bf', '#ab548a', '#bf404c', '#b5a940', '#3fa687'
],
};

// Get the saved color from localStorage or set a default lightness
const savedColor = localStorage.getItem('selectedColor');
const cssHsl = getCssHsl('--clr-a-text');
const initialHsl = savedColor ? JSON.parse(savedColor) : { ...cssHsl, l: 50 }; // Default lightness to 50%
const hexColor = savedColor ? hslToHex(initialHsl.h, initialHsl.s, initialHsl.l) : hslToHex(cssHsl.h, cssHsl.s, 50); // Use CSS hue and saturation, default lightness to 50%

function showColorPicker(e) {
e.preventDefault();
e.stopPropagation();
const target = e.currentTarget.querySelector('i');

if (!picker) {
picker = new jscolor(target, {
onInput: 'updateColor(this)',
valueElement: null, // This ensures that the color value is not applied to the button itself
previewElement: null, // No preview element
value: hexColor // Set the initial color
});
}

if (picker) picker.show();
}

if (starButtons.length > 0) {
starButtons.forEach(button => {
button.addEventListener('click', showColorPicker);
button.addEventListener('touchstart', showColorPicker); // Add touchstart event listener for mobile
const greenPart = button.querySelector('.green-part');
if (greenPart) {
greenPart.addEventListener('click', handleGreenPartClick);
greenPart.addEventListener('touchstart', handleGreenPartClick);  // Add touchstart event listener for mobile
}
console.log('Star button event listener added');
});
} else {
console.log('No star buttons found');
}

function handleGreenPartClick(e) {
e.preventDefault();
e.stopPropagation();
alert('Green part clicked!');
}

// Apply the saved color on page load
if (savedColor) {
const hslColor = JSON.parse(savedColor);
applyColor(hslColor);
console.log('Applied saved color:', hslColor);
}
});

function updateColor(picker) {
const hexColor = picker.toHEXString();
const hslColor = hexToHSL(hexColor);

console.log('New color selected: ', hslColor);

applyColor(hslColor);
// Save the selected color to localStorage
localStorage.setItem('selectedColor', JSON.stringify(hslColor));
}

function applyColor(hslColor) {
document.documentElement.style.setProperty('--clr-a-text', `hsl(${hslColor.h}, ${hslColor.s}%, var(--L-a-text))`);
document.documentElement.style.setProperty('--clr-a-text-hvr', `hsl(${hslColor.h}, ${hslColor.s}%, calc(var(--L-a-text) * var(--L-a-text-hover-change)))`);
}

function hexToHSL(hex) {

}

function hslToHex(h, s, l) {

}

function getCssHsl(variable) {
const style = getComputedStyle(document.documentElement);
const value = style.getPropertyValue(variable);
const hsl = value.match(/\d+/g).map(Number);
return { h: hsl[0], s: hsl[1], l: hsl[2] };
}

я пытался возиться с элементами CSS, такими как z-index, но безуспешно
это проблема только в Safari, поскольку любой другой браузер работает нормально
п>

Подробнее здесь: https://stackoverflow.com/questions/786 ... is-engaged